[reactjs][如图]修改state不立即生效

Question

想要的效果是添加之后清空 state.text（也就是 input 里面的内容要清空），但是没有清空

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: this.props.list || [],
      text: ''
    }
  }
  renderReminder() {
    return <ul className="list-group col-sm-8 mt-2">
      <li className="list-group-item">
        <div>text</div>
        <div><em>time</em></div>
      </li>
    </ul>
  }
  render() {
    return (
      <div className="App">
        <div className="className">Reminder Pro</div>
        <div className="form-inline">
          <div className="form-group mr-2">
            <input
              type="text"
              className="form-control"
              placeholder="请输入..."
              onChange={(event) => this.setState({ text: event.target.value })}
            />
          </div>
          <button
            type="button"
            className="btn btn-success"
            onClick={() => {
              if (!this.state.text) return;
              this.props.addReminder(this.state.text);
              this.setState({
                text: ""
              });
            }}
          >添加记录</button>
        </div>
        <ul className="list-group col-sm-8 mt-2">
          {
            this.props.list.map((item) => <li className="list-group-item" key={item.id}>
              <div>{item.text}</div>
              <div><em>{item.create_time}</em></div>
            </li>)
          }
        </ul>
      </div>
    );
  }
}

Answer 1

给input绑定value

             <input
              type="text"
              value={this.state.text}
              className="form-control"
              placeholder="请输入..."
              onChange={(event) => this.setState({ text: event.target.value })}
            />

Answer 2

建议楼主先去了解一下受控组件和非受控组件。

如果想达到预期效果，需要让组件受控，做法是给input添加value。

<input
  type="text"
  className="form-control"
  placeholder="请输入..."
  value={this.state.text}
  onChange={(event) => this.setState({ text: event.target.value })}
/>