Как использовать один и тот же 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 ответ

Ссылку можно использовать только для одного компонента / элемента за раз.

Самый простой способ добиться этого - иметь массив ссылок. затем будет перебирать эти ссылки и очищать их.

Более продвинутое решение заключалось бы в том, чтобы обернуть каждый выбор компонентом реакции, который регистрировал бы слушателя в центральном диспетчере событий, и эта кнопка отправляла бы очищать все событие.

Третье решение - контролировать эти селекции. Чем вы можете легко изменить состояние.

Другие вопросы по тегам