使用 props.change 更改 redux-form 中输入字段的值

Question

我有一个表单需要从我的后端检索一个字段的值。它似乎成功检索了值，但它没有更新表单中的值。

我如何使用 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-form/change ...

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

但是我的 foo-field 值没有得到更新。我检查了反应开发者工具，值只是“”。我按照 documentation 的更改说明进行操作。任何关于从这里去哪里的建议将不胜感激。我是 React 和 redux-form 的新手。

Answer 1

首先，你得派遣它。其次，您将 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))
  });
}

使用 props.change 更改 redux-form 中输入字段的值

Using props.change to change the value of an input field in redux-form

javascript

reactjs

redux

redux-form