Как использовать один и тот же Ref в разных дочерних компонентах?
Как передать одну и ту же ссылку нескольким дочерним компонентам в React? Я создаю Ref, чтобы при нажатии пользователем кнопки состояние внутри компонента изменялось. Сейчас он работает, но только с одним компонентом. Нужно ли создавать несколько ссылок?
class FilterToolbar extends Component {
constructor(props) {
super(props)
this.child = React.createRef();
}
handleClear(){
this.child.current.clearAll();
}
render() {
return (
<div>
<button className='' onClick={this.handleClear}>
Clear Filters
</button>
<Select ref={this.child} />
<Select ref={this.child} />
<Select ref={this.child} /> //this one updates with the value I want
</div>
)
}
}
и функция в компоненте Select:
clearAll() {
this.setState({ selected: 'I changed my value' })
}
1 ответ
Ссылку можно использовать только для одного компонента / элемента за раз.
Самый простой способ добиться этого - иметь массив ссылок.
Более продвинутое решение заключалось бы в том, чтобы обернуть каждый выбор компонентом реакции, который регистрировал бы слушателя в центральном диспетчере событий, и эта кнопка отправляла бы очищать все событие.
Третье решение - контролировать эти селекции. Чем вы можете легко изменить состояние.