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字段值没有更新。我检查了react开发人员工具，值只是“”。我遵循documentation的更改指示。任何关于从这里出发的建议都将不胜感激。我是新来的反应者，并形成了形式。

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形式的输入字段的值

1 个答案: