Как получить ссылку из дочернего компонента Mobiscroll в родительский - PullRequest
Новая
       23

Как получить ссылку из дочернего компонента Mobiscroll в родительский

0 голосов
/ 21 октября 2018

Я пытаюсь передать состояние ребенка в родителя.После перемещения состояния и метода дочернего элемента в родительский объект я получил следующее: 

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 не определена от родителя.Есть ли простой способ сделать это?Любые советы приветствуются.

1 Ответ

0 голосов
/ 22 октября 2018

Вы можете использовать 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" />
...