反应表单输入在编辑时不改变

Question

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

我怀疑我没有正确传递道具或正确更新状态，但 Chrome 开发工具的 React 选项卡似乎没有问题...

这是组件的第一部分：

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. */}
        </label>
        <button className='formSubmit' onClick={this.handleSubmit} value='Submit'>Done</button>
      </form>
    </div>
  )

......

GitHub（开发分支）上的完整代码，Task.js 文件是我正在处理的文件：https://github.com/emachaffie/timeboxer/tree/development

非常感谢任何帮助！

Answer 1

这完全是因为您通过调用 .setState() 更新了 this.state，但从行中的 this.props 获取值

const { task, timeNeeded, timeLeft, dueDate, id } = this.props

而且由于每次按下按键都会调用onChange，因此使用来自.props 的值重新渲染输入，看起来“它不允许编辑”（但实际上它允许）。