我不明白为什么当它只是一个空字符串时为什么要设置value = {this.state.task}，以及数据流从输入值到状态的准确程度。
当我们第一次设置该值时，它基本上是一个空字符串。但是，当我尝试实际设置value =''时，输入字段在呈现的页面上无法正常工作。
我得到onChange，将状态设置为相应的名称和值，这就是数据流入状态的方式。但是为什么当我们再次设置value =''时为什么不起作用？
import React, { Component } from 'react';
import uuid from 'uuid/v4';
export class NewTodoForm extends Component {
constructor(props) {
super(props)
this.state = {
task: ""
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e){
this.setState({
[e.target.name]: e.target.value
})
}
handleSubmit(e){
e.preventDefault();
this.props.createTodo({ ...this.state, id: uuid() });
this.setState({ task: "" });
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label htmlFor='task'>New Todo</label>
<input
type='text'
placeholder='New Todo'
id='task'
name='task'
// why is this {this,state.task} ?
value={this.state.task}
onChange={this.handleChange}
/>
<button>Add Todo</button>
</form>
</div>
)
}
}
export default NewTodoForm
因为value正在设置...输入的值。通过value={this.state.task}基本上做到这一点，您就可以将输入与组件的状态以及React组件的生命周期相连接。因此，基本上，无论何时，只要您更改组件状态的状态即可从任何地方（甚至以编程方式）获得输入，React将能够正确更新输入，并且不会发生任何错误或奇怪的事情。
在React文档中对此进行了很好的解释。他们正在做这个受控组件...
其值由React这样控制的输入表单元素称为“受控组件”。
...从而使React组件的状态成为唯一的“真理来源”，这意味着可以防止出现怪异的错误和不良行为。
由于
value属性是在表单元素上设置的，因此显示的值将始终为this.state.value，从而使React状态成为真相的来源。
有一个真理源而不是很多真理总是一种好习惯。在这种情况下，如果您使输入的值与组件的状态不同，那么您将获得多个真相，从而使您的应用暴露于错误中。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句