Question

我正在尝试将孩子的状态归为父。将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>
    )
  }
}

我需要以某种方式从父级调用子级的ref值。问题在于，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 @ $2/Credit
        </mobiscroll.Slider>
      </Fragment>
    )
  }
}

export default React.forwardRef((props, ref) => <Child innerRef={ref} {...props}/>);

并像这样使用它：

<Child ref="mpc_slider" />

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

1 个答案: