Question

我想重用此组件

render() {
    return (



        <SelectionGroup
            renderContent={this.renderButton}
            items={this.props.items}
            onPress={this.selectionHandler.selectionHandler}
            isSelected={this.selectionHandler.isSelected}
            containerStyle={styles.answers}
            onItemSelected={(item) => this.setState({ selectedAnswer: item.value })}
        />



    );}

我从主屏幕设法将项目发送到选择组

import Selection from './selectionGroup'

      <Selection
      items={cofeeType.options}
      />

我的问题是我不知道如何从可重用组件中获取selectedAnswer

Answer 1

您必须回电以设置父状态的值

constructor(props){
  super(props)
  this.state={
    answers=[]
  }
}

handleAnswers=(answers)=>{
  this.setState({answers})
}

      <Selection
      handleAnswers={this.handleAnswers}
      items={cofeeType.options}
      />

在组件中处理回调

handleValue=(answers)=>{
  const {handleAnswers}=this.props;
  handleAnswers(answers)
  this.setState({ selectedAnswer: item.value });
}

render() {

  return (



      <SelectionGroup
          renderContent={this.renderButton}
          items={this.props.items}
          onPress={this.selectionHandler.selectionHandler}
          isSelected={this.selectionHandler.isSelected}
          containerStyle={styles.answers}
          onItemSelected={this.handleValue}
      />



  );}

反应本机如何从可重用组件中获取变量

1 个答案: