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

Question

我正在尝试将子状态导入父状态。将子项的状态和方法移至父项后，我得到以下内容：

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 @ /Credit
        </mobiscroll.Slider>
      </Fragment>
    )
  }
}

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

Answer 1

您可以使用 React.forwardRef api:

子组件：

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

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

并像这样使用它：

<Child ref="mpc_slider" />

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

How to get the ref from a Mobiscroll child component into the parent

mobiscroll

reactjs