开发者问题收集

如何在子组件的构造函数中等待父组件的props

2019-01-21
1258

我创建了一个具有添加注释功能的日历应用。为了实现添加注释的功能,我创建了一些具有自己的状态 timeStart 的父组件,然后将其传递给子组件。子组件应接受来自 ParentComponentprops ,并在构造函数中执行 time1:this.props.timeStart 。但由于 setState 函数 异步 ,ChildComponent 没有时间等待来自 ParentComponent 的 props。

如何设置 ChildComponent 的初始状态以等待来自 ParentComponent 的 props(换句话说 同步 )?

ParentComponent:

class ParentComponent extends React.Component {

 constructor() {
    super();
    this.state = {
        timeStart:'00:00',
 };

 render(){

    //some code for changing this.state.timeStart

    return (<ChildComponent timeStart={this.state.timeStart}/>);
 }
}

ChildComponent:

class ChildComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            time1:this.props.timeStart,
            time2:'00:00',
        };
        this.onTime1Change = this.onTime1Change.bind(this);
        this.onTime2Change = this.onTime2Change.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onSubmit(event){
        let el ={
            task:this.state.task.slice(),
            time1:this.state.time1.slice(),
            time2:this.state.time2.slice()
        };
        events.push(el);
        event.preventDefault();
    }


    onTime1Change(event){
        this.setState({time1: event.target.value});
    }

    onTime2Change(event){
        this.setState({time2: event.target.value});
    }

    render() {
        return (
            <div className="form">
                   <form onSubmit={this.onSubmit}>
                    <p><label><input type="time" step="3600" name="time1" value={this.state.time1}
                                                           onChange={this.onTime1Change}/></label>
                       <label><input type="time" step="3600" name="time2" value={this.state.time2}
                                                       onChange={this.onTime2Change}/></label></p>

                    <p><input type="submit" value="Submit" /></p>
                </form>
            </div>
        );
    }
}

export default ChildComponent;
1个回答

你可以使用组件的生命周期方法 getDerivedStateFromProps 来实现它。

更多详细信息请见此处 Detail

Dhaval Patel
2019-01-21