如何使用按钮上的onclick功能增加未订购的列表项？

Question

如何

如何使用按钮上的点击功能增加未订购的列表项？

代码

<!--  class App extends Component {
 
  constructor(props) {
      super(props);
      this.state = {
        task: []
      }
      this.add = this.add.bind(this);
      this.remove = this.remove.bind(this);
    }

 add(task) {
   task.preventDefault();
   if(this.refs.task.value === ""){alert('Please write something!')}
   else{
    this.setState({
     task:  <li>{this.refs.task.value}
            <button className="remove" onClick={this.remove}> X </button>            
            </li>
   })   
    this.refs.task.value = "";   
  }
}
  remove(task) {
   task.preventDefault();
    this.setState({
     task: this.refs.task.value.remove
    })
  }
  render() {
    return (
      <center>
      <div className="App">
        <h2>Reactive Todo App</h2>
        <form onSubmit={this.add}>
          <input type="text" ref="task" />
          <button className="add" onClick={this.add}> Add </button>
        </form>
        <ul>
            {this.state.task}
        </ul>
      </div>
      </center>
    );
  }
}

export default App; -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>