如何将两个函数传递给react中的onClick事件

2024-01-10

我想将两个函数传递给onClick事件是handleSubmit and handleDelete to the 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


这个怎么样:

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

这假设您的目标是一次调用两个函数。如果应该在不同情况下调用它们,请给一个函数一个不同的名称,例如onSubmit or onNameChange.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将两个函数传递给react中的onClick事件 的相关文章