如何触发另一个组件元素的onClick函数答案

【问题标题】：How to tigger onClick function of another component element如何触发另一个组件元素的onClick函数
【发布时间】：2021-02-02 22:36:29
【问题描述】：

我创建了一个类基础组件和一个功能组件。功能组件内部有三个按钮，我将该组件称为基于类的组件。

功能组件：

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")时，我需要在类组件中运行单击清除功能。

【问题讨论】：

只需将 clickClear 函数从父（组件）传递给子（函数）作为道具。喜欢<PanelButton handleClick={clearClick} (...)>。然后在子进程中调用传递的函数（回调），例如<Button.Ripple onClick={handleClick} (...)>
哦，是的，我会试试的。我的荣幸
哦，你需要 o bind 类组件中的回调。看看 Sabbirs 的回答..
@HynekS 箭头函数已经绑定了 this 的基于类的组件，因此不需要另一个绑定。

标签： javascript reactjs react-router react-component

【解决方案1】：

您可以将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>
    );
  }
}

【讨论】：

【解决方案2】：

您可以将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>
...

【讨论】：