Блог

Главная - Вопросы по программированию - Как настроить функцию onClick другого элемента компонента

Как настроить функцию onClick другого элемента компонента

#javascript #reactjs #react-router #react-component

#javascript #reactjs #реагировать-маршрутизатор #реагирующий компонент

Вопрос:

Я создал один базовый компонент класса и один функциональный компонент. Внутри функционального компонента есть три кнопки, и я вызвал этот компонент для своего компонента на основе классов.

Функциональный компонент:

 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") на функциональный компонент from, мне нужно запустить функцию Click clear в компоненте Class.

Комментарии:

1. Просто передайте функцию clickClear от родительского (компонента) к дочернему (функции) в качестве реквизита. Нравится <PanelButton handleClick={clearClick} (...)> . Затем вызовите эту переданную функцию (обратный вызов) в дочернем элементе, например <Button.Ripple onClick={handleClick} (...)>

2. о да, я попробую это. с удовольствием

3. О, и вам нужен bind обратный вызов в компоненте класса. Взгляните на ответ Саббирса..

4. функции стрелки @HynekS уже имеют this привязку к компоненту на основе класса, поэтому другая привязка не требуется.

Ответ №1:

Вы можете передавать 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>
    );
  }
}

Ответ №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>
...