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

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作为清除按钮的回调。

PanelButton

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

TicketNew

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

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

2 个答案: