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

想要的效果是添加之后清空 state.text（也就是 input 里面的內(nèi)容要清空），但是沒有清空

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>
    );
  }
}