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.*个状态，而不必将它们分配给this.state内部的ShiftDaily。

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

因此，您需要
1.完全摆脱this.state和constructor的分配。
2.移除this.state = {...}，因为道具会从ShiftDaily.handleChange更新，并在道具变更时滴流至ShiftMaster。
3.直接使用ShiftDaily值。

this.props.*

从父组件更新子组件反应

1 个答案: