如何从 Mobiscroll 子组件中获取 ref 到父组件中答案

【问题标题】：How to get the ref from a Mobiscroll child component into the parent如何从 Mobiscroll 子组件中获取 ref 到父组件中
【发布时间】：2018-10-21 19:00:57
【问题描述】：

我正在尝试将 Child 的状态输入到父级中。将 Child 的状态和方法移入父级后，我得到以下内容：

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

子组件：

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

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

【问题讨论】：

标签： reactjs mobiscroll

【解决方案1】：

你可以使用React.forwardRefapi:

子组件：

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

export default React.forwardRef((props, ref) => <Child innerRef={ref} {...props}/>);

并像这样使用它：

<Child ref="mpc_slider" />

【讨论】：

太棒了。谢谢！