Javascript 如何跳跳虎点击另一个组件元素的函数

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

功能组件：

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;

从“../../components/customzied/PanelButton”导入PanelButton；
类TicketNew扩展了React.Component{
状态={
警报选项：[]，
}
单击清除=（）=>{
控制台日志（“ok”）；
}
render（）{
const rqst=this.state.rquirdState；
返回(
{（{错误，触摸}）=>（
)}
)
}
}
导出默认TicketNew；

---

当我从functional component单击

按钮（id=“clearButton”）

时，我需要在Class component中运行click clear函数。

您可以将

clickClear

函数作为道具传递给

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

---

您可以将

onClick

回调处理程序作为道具传递到

PanelButton

以附加到每个按钮的

onClick

道具。通过

单击清除
作为清除按钮的回调

面板按钮

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

功能面板按钮（道具）{
返回(
...
只需将clickClear函数作为道具从父（组件）传递给子（函数）。如
。然后调用传递的函数（回调）在child中，比如
哦，是的，我会试试。我的荣幸哦，你需要绑定类组件中的回调。看看Sabbirs的答案。@HynekS arrow函数已经绑定了基于类的组件的
这个
，因此不需要另一个绑定。
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>
    );
  }
}