如何在 Redux 中编辑表单？答案

【问题标题】：How to edit a Form in Redux?如何在 Redux 中编辑表单？
【发布时间】：2023-03-17 12:57:01
【问题描述】：

我是 Redux 的新手。我学习了 React 并尝试学习 Redux。我正在使用 Redux 构建一个待办事项应用程序。我可以创建、读取和删除待办事项，但我无法编辑待办事项。

我的代码：AddTodoForm

<FormGroup>
  <Label for="title">Title</Label>
  <Input type="text" name="title" id="title" placeholder="Enter Title" onChange={this.handleChange.bind(this)} /> {/* <input type="text" value={this.state.value} onChange={this.handleChange.bind(this, 'title')} /> */}
</FormGroup>
<FormGroup>
  <Label for="description">Description </Label>
  <Input type="textarea" name="description" id="description" onChange={this.handleChange.bind(this)} />
</FormGroup>
<FormGroup>
  <div>
    <CustomInput className="toggleInput" type="checkbox" data-toggle="toggle" id="exampleCustomCheckbox" label="Do You want to add Reminder??" onChange={this.toggle.bind(this, !this.state.checkBoxToggle)} />
  </div>
</FormGroup>
{this.state.checkBoxToggle ?
<FormGroup>
  <Label for="reminder">Reminder </Label>
  <Input type="datetime-local" name="date" defaultValue={moment(Date.now()).format( 'YYYY-MM-DDTHH:mm')} id="date" onChange={this.handleChange.bind(this)} />
</FormGroup>
: ''}
<FormGroup check row>
  <Col className="text-center">
  <Button className="btn btn-success" onClick={this.handleSubmit.bind(this)}>Submit</Button>
  </Col>
</FormGroup>

我的handleChange 函数，我在其中设置输入状态：

handleChange(e) {
  console.log(e.target.value, e.target.name);
  if (e.target.name == "date") {
    console.log('date is', e.target.value, new Date(e.target.value).valueOf());
    this.setState({
      [e.target.name]: new Date(e.target.value).valueOf()
    })
  } else {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
}

这是渲染列表功能，我想在其中编辑我的待办事项，但我无法编辑待办事项。我可以删除，但不能编辑：

renderList() {
  if (this.props.todos) {
    return _.map(this.props.todos, (todo, id) => {
      return (
        <tr key={id + 1}>
          <th scope="row">{id + 1}</th>
          <td><Input type="text" disabled name="title" id="title" value={todo.title} onChange={this.handleChange.bind(this)} /></td>
          <td><Input type="textarea" value={todo.description ? todo.description : this.state.description} name="description" id="description" onChange={this.handleChange.bind(this)} /></td>
          <td>{todo.reminder}</td>
          <td> <button className='btn btn-danger' onClick={this.onDeleteClick.bind(this, todo._id)}>Delete</button></td>
          <td><button className='btn btn-success' onClick={this.markCompleted.bind(this, todo._id)}>Mark Complete</button></td>
        </tr>
      );
    })
  }
}

我要编辑的特定待办事项不允许在输入框中键入任何值。我无法设置它。请让我知道我哪里做错了。

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

不要重新发明轮子。与其尝试使用事件处理程序、切片和缩减程序重新实现表单状态，不如使用Redux Form。

它是为特定目的而设计的，具有优雅、高效的 API。

【讨论】：