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

Question

我有一个基于 React class 的组件。我想从该父组件向子组件传递一个函数。当子组件执行 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 是 stateless/function 组件的子组件：

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>
    );
}

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

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

这是错误：

Answer 1

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

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

你也可以缩短这个：

handleOptionChange={this.handleOptionChange}

希望对您有所帮助！

Answer 2

您需要传递 handleOptionChange 作为 handleOptionChange prop

的回调

改变这个：

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

到

handleOptionChange={this.handleOptionChange}

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

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

React: Pass function to child component as props, call onClick in child component

javascript

components

onclick

reactjs

react-props