React：將函數作為道具傳遞給子組件，在子組件中調用onClick

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（父組件）的狀態？ 是否將子組件中單擊元素上的值傳遞回父組件？

這是錯誤：

Answer 1

在父級中，您沒有將任何參數傳遞給當前正在調用 setState() 的處理程序。 您需要將從子級傳遞的值傳遞給處理程序，在此更改事件。 在進行以下更改之前，嘗試在handleOptionChange注銷e ，您將看到它未定義。 請嘗試以下操作：

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

你也可以縮短這個：

handleOptionChange={this.handleOptionChange}

希望這有幫助！

Answer 2

您需要將handleOptionChange作為handleOptionChange道具的回調handleOptionChange

改變這個：

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

到

handleOptionChange={this.handleOptionChange}

發生這種情況是因為處理程序需要一個未傳遞給函數的事件。