Как передать две функции событию onclick в react

Я хочу передать две функции событию onClick, то есть handleSubmit и handleDelete, в HomePage.js из HomeItem.js.

Вот моя ошибка: No duplicate props allowed react/jsx-no-duplicate-props.

Вот мой HomePage.js:

 const HomePage = props => {
  const tvshow = props.item;
  let res;

  if (tvshow.length > 0) {
    res = tvshow.map(res=> (
      <Content item={res} onClick={props.onClick}/>
    ));
  }

  return (
    <div>
      <Container>
        <Row>{res}</Row>
      </Container>
    </div>
  );
};

export default HomePage;

Вот мой HomeItem.js:

const HomeItem = props => {
  function handleSubmit() {
    props.onClick({
      name: props.item.name,
      id: props.item.id
    });
  }

  function handleName() {
    props.onClick({
      name: props.item.name
    });
  }

<Button onClick={handleSubmit}></Button>
<Button onClick={handleName}></Button>

Вот мой App.js:

handleSubmit(newFavorite) {}
handleName(newFavorite) {}

render() {
  <Route
    exact
    path="/"
    render={() => (
      <HomePage
        item={this.state.SaveFavorite}
        onClick={this.handleSubmit}
        onClick={this.handleName}
      />
    )}
  />
} 

Итак, мой вопрос в том, как добавить 2 функции onClick в Hompage.js

Чего именно вы хотите достичь? 2 разные функции для кнопки? или когда вы нажимаете кнопку, вы хотите запустить одну функцию, а затем вторую?

c-chavez 31.10.2018 14:57

почему 2 функции на один onClick? почему бы и нет, 2 отдельных? как onSubmitClick и onNameClick?

brietsparks 31.10.2018 16:56
3
2
7 774
3

Ответы 3

Как насчет этого:

<HomePage
        item={this.state.SaveFavorite}
        onClick={(favorite)=>{
            this.handleSubmit(favorite);
            this.handleName(favorite);
            }
        }
        />

Предполагается, что ваша цель - вызывать обе функции по очереди. Если они должны вызываться в разных ситуациях, дайте одной функции другое имя, например, onSubmit или onNameChange.

Попробуй это:

<HomePage
     item={this.state.SaveFavorite}
     onClick={(newFavorite) => this.handleSubmit(newFavorite);this.handleName(newFavorite)}
 />

что, если первый асинхронный .. я хочу, чтобы второй выполнялся только после успешного завершения первого

Ratnabh kumar rai 02.08.2019 17:47

вы можете передать несколько функций событиям в реакции, например changeEvent, чтобы выполнить эти шаги.

1- создайте свою функцию два или количество функций, которые вам нравятся.

2- создать объект, содержащий эти функции

3- передать объект в качестве опоры туда, где он будет потребляться

4- выберите соответствующую функцию для каждой формы или того, что вам нужно.

вот пример, этот образец с машинописным текстом.

  const onChangeFunctions = {
    onChangeForm1: handleChangeForm1,
    onChangeForm2: handleChangeForm2,
};

   <MainForm
      onChange={onChangeFunctions} // here is your function
      datas={yourData}
      otherProps={otherProps}
    />

Теперь вы используете функцию для дочерних компонентов.

interface PropsFrom {
  model1: Model1;
  model2: Model2;
  onChange: any;
}

export default function ProductForm(props: PropsForm) {
 return (
  <Container maxWidth="lg">
    <Grid item md={6}>
      <FormOne
        model={props.model1} // the model that bind your form
        onChange={props.onChange.onChangeForm1} // here you can use your first function
      />
    </Grid>

   <Grid item md={6}>
      <FormTwo
        model={props.model2} // the model that bind your form
        onChange={props.onChange.onChangeForm2} // here you can use your second function
        />
      </Grid>
    </Grid>
  </Container>

для javascript просто передайте функции как реквизиты и удалите интерфейс из дочерних компонентов.

Другие вопросы по теме