通過回撥函式

在父元件中定義好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>
            )
    }
 }