从父组件更新子组件反应

Question

您好，我是新来的反应，我有一些情况。我想将数据从父级更新到子级，但子级数据更改不会更新到父级。

这是我的父组件 =>

export default class ShiftMaster extends React.Component{

  constructor(props){
    super(props);

    this.state = {
    monshift : new TempShift(),
}


   }

handelChange = event =>{          

  this.setState({
      [event.target.id]:event.target.value  
  },()=>{

  });
}
                               <ShiftDaily                              

                                shiftday={this.state.monshift}
                                />

这是 TempShift 对象

export class TempShift{
  constructor(
              offin_f=0,
              offout_f=0,
              offin_1h=0,
              offout_1h=0,
              offin_2h=0){
              this.offin_f = offin_f;
                this.offout_f = offout_f;
                this.offin_1h = offin_1h;
                this.offout_1h = offout_1h;
                this.offin_2h = offin_2h;
    }

这是名为 ShiftDaily 的子组件

export default class ShiftDaily extends React.Component{

    constructor(props){
      super(props);

      this.state = {                  
              offin_f:props.shiftday.offin_f,
              offout_f:props.shiftday.offout_f,
                  offin_1h:props.shiftday.offin_1h,
                  offout_1h:props.shiftday.offout_1h,
                  offin_2h:props.shiftday.offin_2h}
    }

handleChange = event =>{     
    this.setState({

          [event.target.id]:event.target.value  

    },()=>{

    });
  }

<Form.Control   id="offout_f"
                            className="form-control-sm"                                              
                            value={this.state.offout_f} 
                            onChange={this.handleChange}/>

我无法将父级的句柄更改传递给子级，因为子组件中的值更改不会反映在父级数据中。

但是当我更改父 monshift 时，我想更新为子值并显示数据。我可以知道如何实现这一目标吗？谢谢

Answer 1

您应该直接使用props.* 状态，而不是将它们分配给ShiftDaily 内的this.state。

原因是因为constructor 在渲染期间只运行一次，因此您所做的任何更改都不会通过传递给ShiftDaily 的props.* 反映出来（因为this.state 永远不会再次更新，因为它设置了一次在构造函数中）

所以，你需要
1. 完全摆脱constructor 和this.state = {...} 分配。
2. 删除ShiftDaily.handleChange，因为道具将从ShiftMaster 更新，并在道具更改时逐渐下降到ShiftDaily。
3. 直接使用this.props.* 值。

    <Form.Control   
      id="offout_f"
      className="form-control-sm"                                              
      value={this.props.shiftday.offout_f} />