如何使用从服务器获取的值填充react redux表单？

Question

我使用redux表单来编辑有关任务的信息，因此我从服务器获取数据，并希望在表单中使用它。如何正确填写或填写此表单，然后进行编辑。我尝试填写表单的字段，例如value={task.text}。但是在那之后，表单不允许我修改表单元素。

​

<Form className='m-10' model="editTask" encType="multipart/form-data" onSubmit={(values)=> this.handleSubmit(values)}>
  <Row className="form-group ml-1">
    <strong>Done? </strong>{' '}
    <Col md={{ offset: 1 }}>
    <Control.checkbox model=".status" name="status" className="form-check-input" /> Old value: {task.status === 0 ? 'Pending...' : 'The Task Was Done'}
    </Col>
  </Row>
  <Row className="form-group ml-1">
    Your Task
    <Col md={10}> Old value: {task.text}
    <Control.textarea model=".text" name="text" rows="12" className="form-control" />
    </Col>
  </Row>
  <Row className="form-group ml-1">
    <Col md={{ size: 10, offset: 1 }}> {task.username === '' ? 'Edit' :
    <Button type="submit" color="primary">Edit </Button> }
    </Col>
  </Row>
</Form>

​

Answer 1

您需要在组件中创建一个handleChange方法。

handleChange(evt) {
   this.setState({
      [evt.target.name]: [evt.target.value]
   });
}

确保您的状态属性等于evt.target.name！然后你需要在你的构造函数中绑定它。

this.onChange = this.onChange.bind(this);

最后，以关注的形式，您需要创建一个onChange属性并传入您的handleChange方法。

<YourInputField onChange={this.handleChange} (and whatever other properties you have) />

这将允许您修改表单。目前，您的值是静态的，因为它依赖于状态，而状态目前没有变化。

因此，您可以使用从服务器获取的数据来更新状态，然后可以将表单的值设置为与状态属性相等，此时，处理程序将更改您的状态，这将为您更改输入。

Answer 2

对我来说，我解决了这个问题。我使用了一个名为actions.merge的Redux操作生成器。起初，它无法工作，因为我尝试从子组件调用它。但是我应该在componentDidUpdate钩子中的MainComponent.js文件中这样做。

在ActionCreators.js中，我声明：

​

import actions from 'react-redux-form';
...

export const setDefaultFormValues = (values) => (dispatch) => {
  dispatch(setDefaultUser: (values) => actions.merge(‘editTask’, values));
}

​

在MainComponent.js中，我写道：

​

…
import {
  setDefaultValues
} from '../redux/ActionCreators';

const mapDispatchToProps = dispatch => ({
  ...
  setDefaultValues: (values) => dispatch(setDefaultValues(values))
});

componentDidUpdate() {
  let pathname = this.props.location.pathname;
  let pos = pathname.search("/edit/") + 6;
  let taskId = pathname.substring(pos, pathname.length);
  if (taskId) {
    let tasks = this.props.tasks.tasks.tasks;
    if (tasks) {
      let task = tasks.filter(task => task.id === parseInt(taskId, 10))[0];
      if (task) {
        this.props.setDefaultValues(task);
      }
    }
  }
}

​