the desired effect is to empty state.text (that is, the contents of input should be emptied), but not
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>
);
}
} 