在React中获取多个子组件的状态

Question

我正在整理一个小游戏作为React的练习。 有几种选择，您选择一个您认为正确的选项，游戏会检查它们，并告诉您是否知道。 如何从选项按钮检索状态？ 思考这个问题的“反应方式”是什么？ 这是父母：

class Game extends Component {
  constructor(props) {
    super(props)
    this.answerHandler = this.answerHandler.bind(this)
  }
  answerHandler(event) {
    event.preventDefault()

    // Get answer array, check answer??

  }
  render() {
    const optArr = ["A", "B", "C", "D", "E"]
    return(
      <div>
        {optArr.map((opt, i) => <OptionButton opt={opt} key={i} />)}
        <AnswerButton answerHandler={this.answerHandler} />
      </div>
    );
  }
}

答案按钮：

class AnswerButton extends Component {
  render() {
    return(
      <div>
        <button type="button" onClick={this.props.answerHandler}>Submit Answer!</button>
      </div>
    )
  }
}

选项按钮：

class OptionButton extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selected: false
    }
  }
  unselectSet() {
    this.setState({
      selected: false
    })
  }
  selectSet() {
    this.setState({
      selected: true
    })
  }
  toggler() {
    this.state.selected ? this.unselectSet() : this.selectSet()
  }
  render() {
    return (
      <div>
        <button onClick={() => this.toggler()} style={numberButtonStyle}>{this.props.opt}</button>
      </div>
    )
  }
}

Answer 1

最好将状态存储在需要的地方，而不是将其存储在各个组件中然后再进行检索。 所以我会做

class Game extends Component {
  constructor(props) {
    super(props)
    this.answerHandler = this.answerHandler.bind(this)
  }
  answerHandler(event) {
    event.preventDefault()

    // Get answer array, check answer??

  }
  handleOptionChange( event ) {
     //store the option state here, ready for when we need it
  }
  render() {
    const optArr = ["A", "B", "C", "D", "E"]
    return(
      <div>
        {
           optArr.map(
             (opt, i) => <OptionButton 
                 opt={opt} 
                 key={i} 
                 onOptionChange={ this.handleOptionChange } 
            />)
        }
        <AnswerButton answerHandler={this.answerHandler} />
      </div>
    );
  }
}