react（11）——实现子组件更改父组件的state_react 子组件改变父组件的state

要实现的界面以及功能

实现代码

1. 首先我们要创建三个组件，一个父组件，两个子组件。父组件为App，子组件为Add和List

App组件

//App组件
    class App extends React.Component{
        constructor(props) {
            super(props);
            this.state={
                todos:['吃饭','睡觉','敲代码']
            }
            this.addTodo = this.addTodo.bind(this)
        }
        addTodo(todo){
            //this.state.todos.unshift(todo)    //不能这么写，需要setState才能更新state的内容
            const {todos} = this.state
            todos.unshift(todo)
            this.setState({todos})
        }

        render(){
            return(
                <div>
                    <h1>Simple TODO List</h1>
                    <Add count={this.state.todos.length} addTodo={this.addTodo}/>
                    <List todos = {this.state.todos}/>
                </div>
            )
        }
    }
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

Add组件

//Add组件
    class Add extends React.Component{
        constructor(props) {
            super(props);
            this.handlerAdd = this.handlerAdd.bind(this)
        }

        render(){
            return(
                <div>
                    <input type="text" ref={input => this.todoInput = input}/>
                    <button onClick={this.handlerAdd}>add #{this.props.count+1}</button>
                </div>
            )
        }

        handlerAdd() {
            //1.读取输入的数据
            const todo = this.todoInput.value.trim()
            //2.检查合法性
            if (! todo)
                return
            //3.添加
            this.props.addTodo(todo)
            //4.清除输入
            this.todoInput.value = ""
        }
    }
    Add.PropTypes={
        count: PropTypes.number.isRequired,
        addTodo:PropTypes.func.isRequired
    }
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

List组件

    //List组件
    class List extends React.Component{
        render(){
            return(
                <ul>
                    {
                        this.props.todos.map((todo,index) => <li key={index}>{todo}</li>)
                    }
                </ul>
            )
        }
    }
    List.PropTypes={
        todos:PropTypes.array.isRequired
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2. 然后渲染进入容器就可以了

ReactDOM.render(<App/>,document.getElementById('example'))
1

代码讲解

1. 子组件需要通过父组件实现更改数组和读取数组，所以数组定义在父组件App中，多个组件的共同使用的数据需要定义在父组件之中。

constructor(props) {
            super(props);
            this.state={
                todos:['吃饭','睡觉','敲代码']
            }
            this.addTodo = this.addTodo.bind(this)
        }
1
2
3
4
5
6
7

2. 子组件定义的方法不能更改父组件的state属性，因此给数组添加数据的方法需要定义在父组件中

addTodo(todo){
            //this.state.todos.unshift(todo)    //不能这么写，需要setState才能更新state的内容
            const {todos} = this.state
            todos.unshift(todo)
            this.setState({todos})
        }
1
2
3
4
5
6

3. 如上图，unshift方法的作用是将参数添加到数组的第一个位置
4. 必须要通过setState的方法才能改变组件state属性

this.setState({todos})
1

5. 不仅可以将自身的state或者props属性作为子组件的props传给子组件，还可以将方法作为子组件的props传给子组件。

    render(){
            return(
                <div>
                    <h1>Simple TODO List</h1>
                    <Add count={this.state.todos.length} addTodo={this.addTodo}/>
                    <List todos = {this.state.todos}/>
                </div>
            )
        }
1
2
3
4
5
6
7
8
9

6. trim()方法用于去除两边的空格

const todo = this.todoInput.value.trim()
1

7. 在子组件中可以调用父组件传入过来的方法

   his.props.addTodo(todo)
1

8. 在方法中，return语句可以用来结束方法

        handlerAdd() {
            //1.读取输入的数据
            const todo = this.todoInput.value.trim()
            //2.检查合法性
            if (! todo)
                return
            //3.添加
            this.props.addTodo(todo)
            //4.清除输入
            this.todoInput.value = ""
        }
1
2
3
4
5
6
7
8
9
10
11

9. 在组件外面，可以使用组件.PropTypes来限制该组件属性的规范

    Add.PropTypes={
        count: PropTypes.number.isRequired,
        addTodo:PropTypes.func.isRequired
    }
1
2
3
4