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

Posted 2021-01-20 zh-chen

 1 import React,{Component,Fragment} from ‘react‘
 2 
 3 class App extends Component {
 4   constructor(){
 5     super()  // 要想使用this必须使用super
 6     this.state = {
 7       postList:[
 8         ‘item1‘,
 9         ‘item2‘,
10         ‘item3‘
11       ],
12       inputValue:"test"
13     }
14   }
15   render(){
16     // jsx语法
17      return (
18        <Fragment>
19           <ul> 
20             {
21                this.state.postList.map((value,index)=>{
22                  return (
23                     <li key={index}>{ value }
24                         <button onClick={this.delete.bind(this,index)}>删除</button>
25                     </li>
26                   )
27                })
28             }
29           </ul>
30           <div> {this.state.inputValue} </div>
31           <div>
32             <textarea 
33               value={ this.state.inputValue }
34               onChange={ this.handleInput.bind(this) } 
35               name="" id="">
36             </textarea> <br/>
37             <button onClick={ this.submit.bind(this) }>发布</button>
38           </div>
39       </Fragment>
40     )
41   }
42   submit(){
43     console.log(0)
44     this.setState({
45     // postList:this.state.postList.push(e.target.value) 错误的，改变了postList原来的值，且要用this.setState设置postList
46       postList:[...this.state.postList,this.state.inputValue],
47       inputValue:""
48     })
49   }
50   handleInput(e){
51     // this.state.inputValue = e.target.value   错误的，不能直接赋值
52     // 需要bind(this)改变this指向，让this指向这个实例
53     this.setState({
54       inputValue:e.target.value,
55     })
56   }
57   delete(index){
58     // 删除操作需要保留一个副本，在副本上进行操作，该postList是局部的postList,不影响全局的postList
59     let postList = [...this.state.postList]
60     postList.splice(index,1)  
61     // 数组删除操作用splice
62     this.setState({
63       postList,
64     })
65   }
66 } 
67 
68 export default App

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