Question

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

我的代码：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>
      );
    })
  }
}

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

Answer 1

不要重新发明轮子。使用事件处理程序，切片和简化程序，而不是尝试重新实现表单状态，请使用Redux Form。

它是为特定目的而制作的，并具有优雅，高效的API。

如何在Redux中编辑表单？

1 个答案: