react 修改数据更新视图
2022年9月25日|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import react from "react"; import reactDOM from "react-dom"; class App extends react.Component { state = { count: 0, list: ['123', 123, 123] } render() { return ( <div> <h1>你好世界</h1> <div>{this.state.count}</div> <button type={"button"} onClick={this.countAdd}>count+1</button> <ul> {this.state.list.map((item, index) => { return (<li key={index}>{item}</li>) })} </ul> <button onClick={this.changeList}>点击修改list</button> <button onClick={this.addList}>点击修改list</button> </div> ) } /** * setState * 1.修改state的值 * 2.更新DOM */ countAdd = () => { // console.log(this.state.count) this.setState({ count: this.state.count + 1 }) } /** * 点击修改list */ changeList = () => { this.setState({ list: ['张三', '李四', '王五'] }) } /** * 给list 添加一个新的值 */ addList = () => { this.setState({ list: [...this.state.list,'赵四'] }) } } reactDOM.render(<App></App>, document.getElementById('root')) |
