Я хочу передать две функции событию 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 функции на один onClick
? почему бы и нет, 2 отдельных? как onSubmitClick
и onNameClick
?
Как насчет этого:
<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)}
/>
что, если первый асинхронный .. я хочу, чтобы второй выполнялся только после успешного завершения первого
вы можете передать несколько функций событиям в реакции, например changeEvent, чтобы выполнить эти шаги.
1- создайте свою функцию два или количество функций, которые вам нравятся.
2- создать объект, содержащий эти функции
3- передать объект в качестве опоры туда, где он будет потребляться
4- выберите соответствующую функцию для каждой формы или того, что вам нужно.
вот пример, этот образец с машинописным текстом.
const onChangeFunctions = {
onChangeForm1: handleChangeEventForm1,
onChangeForm2: handleChangeEventForm2,
};
<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 просто передайте функции как реквизиты и удалите интерфейс из дочерних компонентов.
Чего именно вы хотите достичь? 2 разные функции для кнопки? или когда вы нажимаете кнопку, вы хотите запустить одну функцию, а затем вторую?