React---简单实现表单点击提交插入、删除操作

import React,{Component,Fragment} from 'react'

class App extends Component {
  constructor(){
    super()  // 要想使用this必须使用super
    this.state = {
      postList:[
        'item1',
        'item2',
        'item3'
      ],
      inputValue:"test"
    }
  }
  render(){
    // jsx语法
     return (
       <Fragment>
          <ul> 
            {
               this.state.postList.map((value,index)=>{
                 return (
                    <li key={index}>{ value }
                        <button onClick={this.delete.bind(this,index)}>删除</button>
                    </li>
                  )
               })
            }
          </ul>
          <div> {this.state.inputValue} </div>
          <div>
            <textarea 
              value={ this.state.inputValue }
              onChange={ this.handleInput.bind(this) } 
              name="" id="">
            </textarea> <br/>
            <button onClick={ this.submit.bind(this) }>发布</button>
          </div>
      </Fragment>
    )
  }
  submit(){
    console.log(0)
    this.setState({
    // postList:this.state.postList.push(e.target.value) 错误的，改变了postList原来的值，且要用this.setState设置postList
      postList:[...this.state.postList,this.state.inputValue],
      inputValue:""
    })
  }
  handleInput(e){
    // this.state.inputValue = e.target.value   错误的，不能直接赋值
    // 需要bind(this)改变this指向，让this指向这个实例
    this.setState({
      inputValue:e.target.value,
    })
  }
  delete(index){
    // 删除操作需要保留一个副本，在副本上进行操作，该postList是局部的postList,不影响全局的postList
    let postList = [...this.state.postList]
    postList.splice(index,1)  
    // 数组删除操作用splice
    this.setState({
      postList,
    })
  }
} 

export default App

这样，就可以通过react语法简单实现表单提交增加、删除操作！