Как передать две функции дочернему компоненту
Я пытаюсь передать две функции, но не работаю. вот моя попытка
ChildComponent.js
render(
let val = -1
return(
<div>
<Button onClick = {this.props.handelSecondClick} >second button click</Button>
<Button onClick = {this.props.handelFirstClick} >First button click</Button>
</div>
)
)
App.js
this.state = {
data: [1,2]
}
handelFirstClick(val){
alert("first button clicked")
let data = this.state.data
data[0] = val
this.setState({data})
}
handelSecondClick(val){
alert("second button clicked")
let data = this.state.data
data[1] = val
this.setState({data})
}
render(
return(
< ChildComponent onClick = {this.handelSecondClick(val)} onClick = {this.handelFirstClick(val)}
)
/>
)
Можно ли вообще передать две функции? В дочернем компоненте я создаю две кнопки, две из которых обрабатывают два метода отдельно. Как мне изменить, чтобы обе функции передавались двум дочерним компонентам?
Вы пытаетесь определить onclick два раза! это не сработает
как мне определить один раз и одновременно передать две функции
Также вы можете сделать вот так stackblitz.com/edit/реагировать-v6jhh2 !
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Вы должны отправить 2 разных реквизита для обработки нескольких кликов. Сделайте что-нибудь вроде
<ChildComponent firstClick = {this.handleFirstClick.bind(this, val)} secondClick = {this.handleSecondClick.bind(this, val)} />
handleFirstClick(val){...}
handleSecondClick(val){...}
В вашем дочернем компоненте получите к ним доступ как
render(){
return(
<Button onClick = {this.props.firstClick}>Button 1</Button>
<Button onClick = {this.props.secondClick}>Button 2</Button>
)
}
если возможно, не могли бы вы обновить свой ответ, как если бы значение val было передано функции
Легкое исправление было бы
ChildComponent.js
render(
return(
<div>
<Button onClick = {this.props.onFirstClick} >second button click</Button>
<Button onClick = {this.props.onSecondClick} >First button click</Button>
</div>
)
)
App.js
this.state = {
data: [1,2]
}
handelFirstClick(){
alert("first button clicked")
let data = this.state.data
data[0] = -1
this.setState({data})
}
handelSecondClick(){
alert("second button clicked")
let data = this.state.data
data[1] = -1
this.setState({data})
}
render(
return(
< ChildComponent onSecondClick = {this.handelSecondClick} onFirstClick = {this.handelFirstClick}
)
/>
)
Также рекомендуется сделать проверку по клику, действительно ли реквизит работает или нет, иначе он выдаст ошибку. Пытаться
onFirstClick = () => {
const {onFirstClick } = this.props;
if (typeof onFirstClick === 'function') {
onFirstClick();
}
}
render(
return(
<div>
<Button onClick = {this.onFirstClick} >second button click</Button>
<Button onClick = {this.onSecondClick} >First button click</Button>
</div>
)
)
Создайте 2 разные функции.
Также вы пропустили привязку этих функций. Либо используйте функции стрелок, либо метод привязки.
< ChildComponent value = {val}
handleSecondClick = {() => this.handelSecondClick(val)}
handleFirstClick = {()=> this.handelFirstClick(val)}
/>
Вы можете получить к нему доступ через
this.props.handleSecondClick(this.props.value)
this.props.handleFirstClick(this.props.value)
Возможно, в этом случае не нужна функция стрелки. Потому что он не использует здесь параметры.
если возможно, не могли бы вы обновить свой ответ, как будто val передается функции
он говорит, что val не определен
@toymoy ваш val исходит от родительского компонента? тогда вы можете передать это как опору
@TamDc Функции стрелок необходимы для правильной привязки this. Альтернативой было бы сделать this.handelSecondClick = this.handelSecondClick.bind(this) в конструкторе.
Вы должны объектно-деструктурировать
App.js
render() {
return(
< ChildComponent func1 = {this.handelSecondClick} func2 = {this.handelFirstClick} />
)
}
ChildComponent .js
render() {
const {func1, func2} = this.props
return(
<Button onClick = {() => func1(val)} >second button click</Button>
<Button onClick = {() => func2(val)} >First button click</Button>
)
}
если возможно, не могли бы вы обновить свой ответ, как если бы значение val было передано функции
@toymoy мой ответ уже за передачу val от childComponent. func1 = {this.handleSecondClick} — это просто присвоить адрес функции handleSecondClickfunc1. Итак, в ChildComponent вы можете вызвать эту функцию через func1
В компоненте есть две кнопки, вы можете передать обе функции в качестве реквизита в компоненте и добавить метод onClick для таких кнопок, как: -
return(
<div>
<Button onClick = {this.props.function2} >second button click</Button>
<Button onClick = {this.props.function1} >First button click</Button>
</div>
)
а затем в компоненте вы можете написать как: -
< ChildComponent function1 = {this.handelFirstClick()} function2 = {this.handelSecondClick()} />
Надеюсь это поможет!
Вы должны переименовать
childComponentвChildComponentили Babel будет рассматривать это как строку, а не как переменную.. Вы также не должны изменять состояние напрямую.