React学习笔记（三）：状态&数据传递

状态

状态属于组件私有的属性，在组件内部通过 this.state 来访问到组件中的状态，通过 this.setState() 来设置组件中的状态。
关于this.setState()如有不懂可以看这里https://www.jianshu.com/p/a883552c67de

import React, { Component } from "react";
import { Form ,Input ,Button ,Radio } from "element-react";
import "element-theme-default";

class CommentForm extends Component{
    //向这个 class 中添加一个构造函数，用来初始化 state
    constructor(props) {
        //注意:在 JavaScript class 中，每次你定义其子类的构造函数时，都需要调用 super 方法。
        //因此，在所有含有构造函数的的 React 组件中，构造函数必须以 super(props) 开头。
        //否则，this.props在构造函数中将是未定义，并可能引发异常。
        super(props);
        this.state = {
            form: {
                name: '',
                age:null,
                sex:"",
            }
        };
        //点击按钮1秒后输出状态
        setInterval(()=>{console.log(this.state.form)},1000)
    }
    onClick(){
        //设置状态
        this.setState({
            form: {
                name: '张三',
                age:20,
                sex:"男",
            }
        })
    }
    render(){
        return(
            {/* 给事件绑定this，否则会造成this丢失 */}
            <Button onClick={this.onClick.bind(this)}>确认</Button>
        )
    }
}

export default CommentForm;

setState()函数接受两个参数，一个是一个对象，就是设置的状态，还有一个是一个回调函数，是在设置状态成功之后执行的，所以我们可以通过回调拿到最新的state值。

updateData = (newData) => {
    this.setState(
        { data: newData },
        () => {
            //这里打印的是最新的state值
            console.log(this.state.data);
        }
    );
}

父组件向子组件传递数据：

在父组件中通过属性将数据传递给子组件。<子组件名称 props属性名称 = {传递的数据} />

在子组件中用 “this.props.属性名” 来获取

子组件向父组件传递数据

在父组件中定义一个事件函数，并将这个函数以属性的方式传递给子组件，在子组件中调用这个函数并将要传递的数据作为参数传递过去。
父组件：

import React from "react";
import CommentList from "./CommentList";
import CommentForm from "./CommentForm";

class CommentBox extends React.Component{
    showSubmit(obj){
        console.log(obj)
    }
    render(){
        return(
            <div>
                <CommentList></CommentList>
                {/* 将事件事件函数以属性方式传递给子组件，使子组件可以调用这个函数 */}
                <CommentForm showSubmit={this.showSubmit}></CommentForm>
            </div>
            
        )
    }
}

export default CommentBox;

子组件：

import React, { Component } from "react";
import { Form ,Input ,Button ,Radio } from "element-react";
import "element-theme-default";

class CommentForm extends Component{
	//初始化状态
    constructor(props) {
        super(props);
        this.state = {
            form: {
                name: '',
                age:null,
                sex:"",
            }
        };
    }
    //阻止表单提交默认事件
    onSubmit(e) {
        e.preventDefault();
    }
    //输入框内容变化时事件
    onChange(key, value) {
        this.state.form[key] = value;
        this.forceUpdate();
    }
    //点击事件
    onClick(){
        let name = this.state.form.name;
        let age = this.state.form.age;
        let sex = this.state.form.sex;
        //调用父组件中的事件函数，并将数据以参数的形式传递过去
        this.props.showSubmit({name,age,sex})
    }
    render(){
        return(
            <Form model={this.state.form} labelWidth="80" onSubmit={this.onSubmit.bind(this)}>
                <Form.Item label="姓名">
                    <Input value={this.state.form.name} onChange={this.onChange.bind(this, 'name')}></Input>
                </Form.Item>
                <Form.Item label="年龄">
                    <Input value={this.state.form.age} onChange={this.onChange.bind(this, 'age')}></Input>
                </Form.Item>
                <Form.Item label="性别">
                    <Radio.Group value={this.state.form.sex} onChange={this.onChange.bind(this, 'sex')}>
                    <Radio value="男"></Radio>
                    <Radio value="女"></Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item>
                    <Button onClick={this.onClick.bind(this)}>确认</Button>
                </Form.Item>
            </Form>
        )
    }
}

export default CommentForm;