反应表单输入在编辑时未更改

React form input not changing on edit(反应表单输入在编辑时未更改)

问题描述

我有一个应用程序，我正在尝试允许用户更新"任务/待办事项"项目的文本。当用户点击"编辑"按钮时，编辑组件会正确呈现，但输入字段不允许编辑。

我怀疑我没有正确传递道具或没有正确更新状态，但是Chrome dev工具的Reaction选项卡似乎是正确的.

以下是组件的第一部分：

class Task extends Component {
  constructor(props) {
    super(props)
    this.state = {
      editingTask: false,
      id: this.props.id,
      task: this.props.task,
      timeNeeded: this.props.timeNeeded,
      dueDate: this.props.dueDate
    }

.

handleChange(event) {
  const key = event.target.name
  const value = event.target.value
  this.setState({
    [key]: value
  })
}

.

下面是渲染：

    render () {
const { task, timeNeeded, timeLeft, dueDate, id } = this.props
if (this.state.editingTask) {
  return (
    <div className='addTaskFormDiv'>
      <form onSubmit={this.handleSubmit}>
        <label>
      Task:
          <input type='text' name='task' value={task} onChange={this.handleChange} />
        </label>
        <label>
        Time needed:
          <input type='text' name='timeNeeded' value={timeNeeded} onChange={this.handleChange} />
        </label>
        <label>
        Due date:
          <DatePicker
            className='dueDate'
            dateFormat='YYYY/MM/DD'
            // selected={this.props.dueDate}
            onChange={this.handleDateChange} />
          {/* Date picker is not closing on selection. *