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

这是因为您通过调用this.state来更新.setState()，但直接从this.props中获取值

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

并且由于每个按键操作都会调用onChange，因此输入的输入会重新渲染.props中的值，看起来就像“不允许编辑”（但实际上允许）。

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

1 个答案: