установить начальные значения в форме редукса - PullRequest
0 голосов
/ 21 апреля 2020

Я работаю над формой редактирования, которая появляется после нажатия на кнопку «Изменить» из списка. Значение конкретной записи, в которой я нажимаю кнопку «Изменить», находится у меня, но я не знаю, как заполнить эти значения после нажатия кнопки «Изменить». (С использованием приставной формы v8.3.1):

import React, {useEffect} from 'react'
import { Field, reduxForm } from 'redux-form'
import {connect} from 'react-redux';
import {streamFetchAction} from '../../actions';
import {editStreamAction} from '../../actions';


const validate = values => {
  const errors = {};
  const alphabetsOnly = /^[A-Za-z][A-Za-z\s]*$/;

console.log('values',values)
  if (!values.title) {
  } else if (!(alphabetsOnly.test(values.title))) {
    errors.title = 'title should not contain number'
  }
  if (!values.description) {
    errors.description = 'Description Required'
  } else if (isNaN(Number(values.age))) {
    errors.age = 'Must be a number'
  } 
  return errors
}

const warn = values => {
  const warnings = {}
  if (values.age < 19) {
    warnings.age = 'Hmm, you seem a bit young...'
  }
  return warnings
}

const renderField = ({
  input,
  label,
  type,
  value,
  meta: { touched, error, warning }
}) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} value={value} />
      {touched &&
        ((error && <span style={{color:'red'}}>{error}</span>) ||
          (warning && <span>{warning}</span>))}
    </div>
  </div>
)


function EditStream(props){
  const selectedId= Number(props.match.params.id)-1
  const selectedListToEdit = props.streams[selectedId];
  const selectedListToEdit_title = selectedListToEdit.title
  const selectedListToEdit_desc = selectedListToEdit.description

    console.log('props><',props)
    useEffect(()=>{
        props.streamFetchAction()


    },[]);
    const onSubmit =(e) =>{

        console.log('e>>.',e)
    }
  const { pristine, reset, submitting } = props
  return (
    <form onSubmit={props.handleSubmit(onSubmit)}>
      <Field
        name="title"
        type="text"
        component={renderField}
        label="Title"

      />

      <Field name="description" type="text" component={renderField} label="Description" value={selectedListToEdit_desc}/>
      <div>
        <button type="submit" disabled={submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  )
}
const mapStateToProps = ({form,streams}) =>{
     console.log('edit state:',form)

//return state
return {editStreamForm:{}, ...form, streams }

}
const formWrap = reduxForm({form:"editStreamForm", validate})(EditStream)

// export default reduxForm({
//   form: 'syncValidation', // a unique identifier for this form
//   validate, // <--- validation function given to redux-form
//   warn // <--- warning function given to redux-form
// })(EditStream)

export default connect(mapStateToProps, {streamFetchAction, RF_autoFill})(formWrap)

Здесь selectedListToEdit содержит выбранный объект, который выглядит следующим образом: {title:'abc', 'description:'xyz'}

Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...