Reactjs 从父组件更新子组件_Reactjs_React Component

Reactjs 从父组件更新子组件

reactjs

Reactjs 从父组件更新子组件,reactjs,react-component,Reactjs,React Component,嗨，我是新的反应，我有一些情况。我想将数据从父级更新到子级，但子级数据更改不会更新到父级这是我的父组件=> export default class ShiftMaster extends React.Component{ constructor(props){ super(props); this.state = { monshift : new TempShift(), } } handelChange = event =>{

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

这是我的父组件=>

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}
                                />

这是名为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}/>

导出默认类ShiftDaily扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={
offin\u f:props.shiftday.offin\u 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.target.id]：event.target.value
},()=>{
});
}

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

但是当我在父

monshift

中更改时，我想更新到子值并显示数据。我可以知道如何实现这一点吗？谢谢您应该使用

道具。*

直接声明，而不将其分配给

此.state

内部

ShiftDaily

原因是

构造函数

在渲染期间只运行一次，因此您所做的任何更改都不会通过

道具反映。*

传递给

ShiftDaily

（因为

此.state

不会再次更新，因为它在构造函数中设置过一次）

因此，您需要
1.完全摆脱

构造函数

和

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} />

您应该使用

道具。*