单击按钮后如何清除输入值？答案

【问题标题】：how can i clean the input value after i click the button?单击按钮后如何清除输入值？
【发布时间】：2021-01-15 11:55:01
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs react-native react-redux

【解决方案1】：

您在按钮的 onClick 处理程序中清除名称：

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

【讨论】：

【解决方案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;

【讨论】：