Как редактировать форму в Redux?

Question

Я новичок в Redux. Я выучил React и пытаюсь выучить Redux. Я создаю приложение todo с 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>
      );
    })
  }
}

Конкретная задача, которую я хочу отредактировать, не позволяет вводить любое значение в поле ввода. Я не могу установить это. Пожалуйста, дайте мне знать, где я делаю неправильно.

Answer 1

Не изобретай велосипед. Вместо того, чтобы пытаться переопределить состояние формы, с помощью обработчиков событий, слайсов и редукторов, используйте Redux Form .

Это сделано для этой конкретной цели и имеет элегантный, эффективный API.