本文介绍了反应表单输入在编辑时未更改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个应用程序，我正在尝试允许用户更新"任务/待办事项"项目的文本。当用户点击"编辑"按钮时，编辑组件会正确呈现，但输入字段不允许编辑。
我怀疑我没有正确传递道具或没有正确更新状态，但是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. *本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！