Reactjs 如何将引用从Mobiscroll子组件获取到父组件中

我想把孩子的状态告诉父母。将子对象的状态和方法移动到父对象中后，我得到了以下结果：

export default class Parent extends React.Component {
  constructor() {
    super();
    this.state = { mpc_steps: { price: 0, credits: 0, text: "MPC Credits" } }
  }

  setMPCSteps = () => {
    let step = this.refs.mpc_slider.instance.getVal(); // Will fail
    this.setState({
      mpc_steps: { 
        price: step * 200, 
        credits: step, 
        text: "MPC Credits" 
      }
    });
  };

  render() {
    return(
      <div>
        <Child getCredits={this.setMPCSteps} getParentState={this.state.mpc_steps}/>
    )
  }
}

导出默认类父类扩展React.Component{
构造函数（）{
超级（）；
this.state={mpc_步骤：{price:0，credits:0，text:“mpc credits”}
}
setMPCSteps=（）=>{
让step=this.refs.mpc_slider.instance.getVal（）；//将失败
这是我的国家({
mpc_步骤：{
价格：步骤*200，
学分：步骤，
正文：“MPC学分”
}
});
};
render（）{
返回(
)
}
}

子组件：

export default class Child extends React.Component {
  render() {
    return (
      <Fragment>
        <mobiscroll.Slider
          ref="mpc_slider"
          value={this.props.getParentState}
          onChange={this.props.getCredits}
        >
          Buy Credits @ $2/Credit
        </mobiscroll.Slider>
      </Fragment>
    )
  }
}

导出默认类子组件{
render（）{
返回(
购买信用卡@2美元/信用卡
)
}
}

---

我需要从父对象调用子对象的ref值。问题是mobiscroll ref不是从父级定义的。有没有一个简单的方法可以做到这一点？欢迎提供任何提示。

您可以使用

React.forwardRef

：

子组件：

export default class Child extends React.Component {
  render() {
    return (
      <Fragment>
        <mobiscroll.Slider
          ref="mpc_slider"
          value={this.props.getParentState}
          onChange={this.props.getCredits}
        >
          Buy Credits @ $2/Credit
        </mobiscroll.Slider>
      </Fragment>
    )
  }
}

类子级扩展React.Component{
render（）{
返回(
购买信用卡@2美元/信用卡
)
}
}
导出默认的React.forwardRef（（props，ref）=>）精彩。非常感谢。