如何觸發另一個組件元素的 onClick 功能

Question

我創建了一個類基礎組件和一個功能組件。 功能組件中有三個按鈕，我將該組件稱為基於類的組件。

功能組件：

function PanelButton(props){

  return (
    <div>
      <Button.Ripple
        color="success"
        type="submit"
        style={{margin:"5px", width:"110px"}}
      >
        Submit
      </Button.Ripple>
      <Button.Ripple
        color="primary"
        id="clearButton"
        type="button"
        style={{margin:"5px", width:"110px"}}
      >
        Clear
      </Button.Ripple>
      <Button.Ripple color="danger" type="button" style={{margin:"5px", width:"110px"}}>
        Close
      </Button.Ripple>
    </div>
  )
}
export default PanelButton;

類基礎組件，其中我將功能組件導入到：

import PanelButton from '../../components/customzied/PanelButton';

class TicketNew extends React.Component{

  state = {
    alertOption:[],
  }

  clickClear = () => {
    console.log("ok");
  }

  render() {
    const rqst = this.state.rquirdSate;
    return (
      <Card>
        <Formik>
          { ({ errors, touched}) => ( 
          <div>
            <Form onSubmit={handleSubmit}>
              <CardHeader>
                <PanelButton />
              </CardHeader>
              <CardBody>
                <Row />
              </CardBody>
            </Form>
          </div>
        )}
        </Formik>
      </Card>
    )
  }
}

export default TicketNew;

當我單擊功能組件中的button(id = "clearButton") ，我需要在 Class 組件中運行 Click clear 功能。

Answer 1

您可以將clickClear函數作為道具傳遞給PanelButton組件。 PanelButton代碼如下所示，

function PanelButton(props){

    return(
       <div>
           <Button.Ripple color="success" type="submit" style={{margin:"5px", width:"110px"}}>
               Submit
           </Button.Ripple>
           <Button.Ripple color="primary" id="clearButton" onClick={props.onClickCallback} type="button"  style={{margin:"5px", width:"110px"}}>
               Clear
           </Button.Ripple>
           <Button.Ripple color="danger" type="button" style={{margin:"5px", width:"110px"}}>
               Close
           </Button.Ripple>
       </div>
   )
}

TicketNew代碼將如下所示，

...
<CardHeader>
    <PanelButton onClickCallback={this.clickClear.bind(this)} />
</CardHeader>
...

Answer 2

您可以將onClick回調處理程序作為道具傳遞給PanelButton以附加到每個按鈕的onClick道具。 將clickClear作為清除按鈕的回調傳遞。

面板按鈕

function PanelButton(props) {
  return (
    <div>
      ...
      <Button.Ripple
        color="primary"
        id="clearButton"
        type="button"
        style={{ margin: "5px", width: "110px" }}
        onClick={props.onClear} // <-- attach callback to button's onClick handler
      >
        Clear
      </Button.Ripple>
      ...
    </div>
  );
}

新票

class TicketNew extends React.Component {
  state = {
    alertOption: []
  };

  clickClear = () => {
    console.log("ok");
  };

  render() {
    const rqst = this.state.rquirdSate;
    return (
      <Card>
        <Formik>
          {({ errors, touched }) => (
            <div>
              <Form onSubmit={handleSubmit}>
                <CardHeader>
                  <PanelButton onClear={this.clickClear}/> // <-- pass this.clickClear to onClear prop
                </CardHeader>
                <CardBody>
                  <Row></Row>
                </CardBody>
              </Form>
            </div>
          )}
        </Formik>
      </Card>
    );
  }
}