下面的代码可以正常工作，但是有一个小问题，当我单击按钮时，它没有清理输入字段的值，因此我尝试将代码this.setState({ name: ''})放入nameChangedHandler中，以使该输入值恢复为空，但不会工作，并将输入值锁定为空，然后您将无法在该输入值中输入任何数据。
它通过使用组件生命周期工作吗？
class AddPerson extends Component {
state = {
name: '',
age: '',
};
nameChangedHandler = event => {
this.setState({ name: event.target.value });
};
ageChangedHandler = event => {
this.setState({ age: event.target.value });
};
render() {
return (
<div className="AddPerson">
<input
type="text"
placeholder="Name"
onChange={this.nameChangedHandler}
value={this.state.name}
/>
<input
type="number"
placeholder="Age"
onChange={this.ageChangedHandler}
value={this.state.age}
/>
<button onClick={() => this.props.personAdded(this.state.name, this.state.age)}>
Add Person
</button>
</div>
);
}
}
export default AddPerson;
您在按钮的onClick处理程序中清除名称：
<button onClick={() => {
this.props.personAdded(this.state.name, this.state.age);
this.setState({ name: '' });
}}>
Add Person
</button>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句