我想将两个函数传递给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
答案 0 :(得分:2)
如何?
<HomePage
item={this.state.SaveFavorite}
onClick={(favorite)=>{
this.handleSubmit(favorite);
this.handleName(favorite);
}
}
/>
这假设您的目标是一次调用两个函数。如果应该在不同的情况下调用它们,请给一个函数一个不同的名称,例如onSubmit
或onNameChange
。
答案 1 :(得分:0)
尝试一下:
<HomePage
item={this.state.SaveFavorite}
onClick={(newFavorite) => this.handleSubmit(newFavorite);this.handleName(newFavorite)}
/>
答案 2 :(得分:0)
您可以将多个函数传递给 react 中的事件,例如 changeEvent,以执行这些步骤。
1- 创建您的函数 2 或您喜欢的函数数。
2- 创建一个包含这些函数的对象
3- 将对象作为道具传递到将要消费的地方
4- 为每个表单或您需要的任何内容选择对应的功能。
这是一个例子,这个例子是打字稿。
Project B
现在你在子组件上使用函数
const onChangeFunctions = {
onChangeForm1: handleChangeForm1,
onChangeForm2: handleChangeForm2,
};
<MainForm
onChange={onChangeFunctions} // here is your function
datas={yourData}
otherProps={otherProps}
/>
对于javascript,只需将函数作为道具传递并从子组件中删除接口。