我正在根据以下页面实现以下代码:https://facebook.github.io/react/docs/forms.html
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit(event) {
event.preventDefault();
let data = {
isGoing: this.state.isGoing,
numberOfGuests: this.state.numberofGuests
}
/* Send data in ajax request here */
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Is going:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
我对此有一些疑问:
- 为什么我们需要将组件值存储在状态中?为什么不
只需在正常提交表单时获取我们需要的值
会用标准的 JavaScript 完成吗?推荐的方法似乎是为每个输入或删除的字符重新加载
render
函数。对我来说,这没什么意义。 - 由于 setState 的执行是异步的,并且
this.setState()
和使用this.state.numberOfGuests
实际访问状态之间可能存在延迟,这是否意味着这段代码可能会在设置之前获取状态?如果是这样,为什么官方 React 文档中建议使用这段代码?如果不是,为什么不呢?
最佳答案
关于第二点,是的,handleSubmit
可以在 handleInputChanged
中的状态更新完成之前运行,这在逻辑上是可能的。这在 React 文档中没有提到,或者通常是任何人关心的原因是因为 setState
函数运行真的很快。作为一个实验,我做了 a codepen to determine the average time taken for setState to run .似乎大约需要 0.02 毫秒。没有人可以更改他们的输入,然后在不到那个时间的时间内提交表单。事实上,handleSubmit
中的 e.preventDefault()
调用无论如何都花费了将近四分之一的时间。
如果在继续之前 setState
已经完成是绝对重要的情况,那么您可以使用回调函数来 setState
,例如
this.setState({
colour: 'red'
}, () => {
console.log(this.state.color)
});
然后 red
将始终 被记录,这与可能记录先前值的以下情况相反。
this.setState({
colour: 'red'
});
console.log(this.state.color);
关于javascript - 了解 ReactJS 受控表单组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43010779/