反应表单输入在编辑时未更改 [英] 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. */}
        </label>
        <button className='formSubmit' onClick={this.handleSubmit} value='Submit'>Done</button>
      </form>
    </div>
  )

.

GitHub(开发分支)上的全部代码，Task.js文件就是我正在处理的文件：https://github.com/emachaffie/timeboxer/tree/development

非常感谢您的帮助！

推荐答案

这都是因为您通过调用.setState()更新了this.state，但从第

行中的this.props取值

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

由于每次都调用onChange，因此每个按键输入都会使用.props中的值重新呈现，看起来"它不允许编辑"(但实际上它允许编辑)。

这篇关于反应表单输入在编辑时未更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！