Question

我有一个基于React类的组件。我想向子组件传递此父组件的功能。当子组件发生onClick事件时，我将调用父组件的函数。然后，我想根据子组件中单击的元素来更新父组件中的状态。

QuestionsSection是具有以下状态的父组件：

class QuestionsSection extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isVisible: "option1"
    };
  }

  handleOptionChange = e => {
    this.setState({
      isVisible: e.target.value
    });

    alert("function called");
  }

  render() {
    return (
      <div>
        <QuestionsItems
          isVisible={this.state.isVisible}
          handleOptionChange={() => this.handleOptionChange()}
      </div>
    );
  }
}

QuestionsItems是无状态/功能组件的子组件：

const QuestionsItems = (props) => {
    return (
      <div>
        <Container className="d-flex flex-md-row flex-column justify-content-center">
          <Row className="d-flex flex-md-column flex-row order-1 justify-content-center">
            <Col className={props.isVisible === 'option1' ? 'highlighted' : 'questions-section'}>
              <label className="cursor-pointer" onClick={props.handleOptionChange}>
                <input
                  type="radio"
                  value="option1"
                  checked={props.isVisible === 'option1'}
                  onChange={props.handleOptionChange}>
                </input>
                <Col xs={{span: 12}}>
                  <img src={questions1} alt="pic" height="50"/>
                </Col>
                <p>Ask a question</p>
              </label>
            </Col>
            <Col className={props.isVisible === 'option2' ? 'highlighted' : 'questions-section'}>
              <label className="cursor-pointer" onClick={props.handleClick}>
                <input
                  type="radio"
                  value="option2"
                  checked={props.isVisible === 'option2'}
                  onChange={props.handleOptionChange}>
                </input>
                <Col xs={{span: 12}}>
                  <img src={questions2} alt="pic" height="50"/>
                </Col>
                <p>Vote on everything</p>
              </label>
            </Col>
        </Row>
        <Row className="d-flex flex-md-column flex-row image-container order-md-2 order-3 justify-content-center">
          <Col
            xs={{span: 12}}
            className="featured-question order-lg-2 order-3">
            {
              props.isVisible === 'option1' ?
                <Col xs={{span: 12}}>
                  <img src={questionsBig1} alt="featured image"/>
                </Col>
              : ""
            }

            {
              props.isVisible === 'option2' ?
                <Col xs={{span: 12}}>
                    <img src={questionsBig2} alt="featured image" />
                </Col>
              : ""
            }            
          </Col>
        </Row>
        </Container>
      </div>
    );
}

此组件具有很多标记/引导语法。忽略它，只有两个元素都具有onClick事件。第三部分只是三元逻辑，它根据值显示第一或第二个元素。

我遇到的问题在于更新父组件中的this.state。 e.target.value未定义。如何根据子组件单击哪个元素来更新QuestionsSection（父组件）的状态？是将子组件中clicked元素上的值传递回父组件的问题吗？

这是错误：

Answer 1

在父级中，您没有将任何参数传递给当前正在调用setState（）的处理程序。您需要将从子级传递的值传递给处理程序，在此更改事件中。在进行以下更改之前，请尝试在e中注销handleOptionChange，您将看到它是未定义的。请尝试以下操作：

handleOptionChange={(e)=> this.handleOptionChange(e)}

您也可以缩短此时间：

handleOptionChange={this.handleOptionChange}

希望有帮助！

Answer 2

您需要传递handleOptionChange作为handleOptionChange道具的回调

更改此：

handleOptionChange={() => this.handleOptionChange()}

到

handleOptionChange={this.handleOptionChange}

之所以会发生这种情况，是因为处理程序需要一个未传递给函数的事件。

反应：将函数作为道具传递给子组件，在子组件中调用onClick

2 个答案: