单击按钮后如何清除输入值?

Question

下面的代码工作得很好，但它有一个小问题，当我单击按钮时，它没有清理输入字段值，所以我试图将代码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;

Answer 1

清除按钮的onClick处理程序中的名称:

<button onClick={() => {
    this.props.personAdded(this.state.name, this.state.age);
    this.setState({ name: '' });
}}>
    Add Person
</button>

Answer 2

class AddPerson extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      age: ""
    };
  }
  nameChangedHandler = (event) => {
    this.setState({ name: event.target.value });
  };
  ageChangedHandler = (event) => {
    this.setState({ age: event.target.value });
  };
  handleSubmit = () => {
    this.props.personAdded(this.state.name, this.state.age);
    this.setState({
      name: "",
      age: ""
    });
  };
  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.handleSubmit}>Add Person</button>
      </div>
    );
  }
}
export default AddPerson;