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

IT技术 javascript reactjs
2021-05-06 01:28:20

我想通过两个函数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

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

您可以将多个函数传递给 react 中的事件，比如 changeEvent，以执行这些步骤。

1- 创建您的功能二或您喜欢的功能数量。

2- 创建一个包含这些函数的对象

3-将对象作为props传递到将要消耗的地方

4- 为每种形式选择对应的功能或您需要的任何功能。

这是一个示例，此示例带有typescript。

  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，只需将函数作为props传递并从子组件中删除接口。

其它你可能感兴趣的问题
上一篇OpenSCAD 不渲染多面体 下一篇有没有支持树莓派的 3D 打印软件？