React笔记（二）：子组件向父组件传值

通过回调函数

在父组件中定义好state和处理state的回调函数，在子组件中通过this.props获取函数的名称，然后在子组件中向函数传入改变的state

• 父组件：

class BrowserPerformance extends Component {    constructor(){        this.state = {        day: new Date().format("yyyy-MM-dd"),    }    }       handleSubmit = (data) => {        const { selectedIndex, selectTime } = data;        this.setState({            day: selectTime        }, this.getPerformanceSummary);    };    render() {        return (            <div className={classes.root}>                <AppSelect                    title="Web"                    dataList={this.state.webClients}                    filterCallback={this.handleSubmit.bind(this)}                    config={{                        time: true,                        other: false,                        select: true                    }}                />            </div>    }}

• 子组件

class AppSelect extends Component {    constructor(props) {        super(props);          this.state = {            selectTime: this.props.config.timeType === 'month' ? new Date().format("yyyy-MM") : new Date().format("yyyy-MM-dd")        }        }    confirm = () => {        const { filterCallback } = this.props;        filterCallback(this.state);    };    render() {     return (            <div className={classes.select}>                <FormControl className={classes.formControl}>                    <Button raised color="primary" onClick={this.confirm} className=   {classes.button}>                        CONFIRM                    </Button>                </FormControl>            </div>            )    } }