Использование props.change для изменения значения поля ввода в избыточной форме - PullRequest
0 голосов
/ 04 декабря 2018

У меня есть форма, которая должна получить значение поля из моего бэкэнда.Кажется, что значение извлекается успешно, но оно не обновляет значение в форме.

Как использовать props.change для обновления поля "foo":

const asyncValidate = (values, dispatch, props) => {
  return axios
  .get(URL)
  .then( (response) => {
    var whyNoChange = props.change("foo", response.data.foo)
    console.log(whyNoChange)
  });
}

Компонент Foo:

const fooField = (props) => (
  <Form.Field 
  error={props.meta.touched && props.meta.error ? true : false}>
  <Input
      placeholder='Change me'
      onBlur={props.input.onBlur}
      onFocus={props.input.onFocus}
      onChange={(param, data) => props.input.onChange(data.value)}
      value={props.input.value}
  />
  {
    props.meta.touched && 
    props.meta.error && 
    <span style={{color: '#9f3a38'}}>
      {props.meta.error}
    </span>
  }
 </Form.Field>
)

Моя форма:

 class MyForm extends Component { 
   // ...
   render () {
     return (
       <Form>
        <Field
         name='foo'
         component={fooField}
       />
      </Form>
   )
 }}

 MyForm = reduxForm({
   form: 'myform',
    validate,
    asyncValidate
 })(MyForm)

И, наконец, что консоль записывает в журнал, когда отправляет redux-форму / изменение ...

{…}
 >meta: Object { form: "myform", field: "foo", touch: false, … }
  payload: "foo-from-backend"
  type: "@@redux-form/CHANGE"

Но мое значение поля foo не обновляется.Я проверил инструменты разработчика реакции и значение просто "".Я следовал указаниям по изменению согласно документации .Любой совет о том, куда идти отсюда, будет принята с благодарностью.Я новичок в реакции и редукции.

1 Ответ

0 голосов
/ 04 декабря 2018

Прежде всего, вы должны отправить его.Во-вторых, вы назначаете функцию void переменной, не вызывая ее.Наконец, я считаю, что change принимает три аргумента - form name, field name и value.

const asyncValidate = (values, dispatch, props) => {
  return axios
  .get(URL)
  .then( (response) => {
    dispatch(change("form name", "foo", response.data.foo))
  });
}
...