Как вы можете создавать ссылки после того, как компонент смонтирован в React? - PullRequest
Новая
       17

Как вы можете создавать ссылки после того, как компонент смонтирован в React?

2 голосов
/ 31 января 2020

В моем случае требуется, чтобы я использовал React.createRef () для каждого имеющегося средства выбора времени (в средствах выбора времени есть определенные функции, которые можно использовать только через ссылки).

Когда страница смонтирована У меня изначально 2 раза сборщики. Все работает хорошо, когда у меня только два, но моя работа разрушена, потому что я обязан добавлять / удалять указатели времени с помощью кнопок. Так что я могу легко добавлять метки времени.

Но теперь мой вопрос: как мне создавать ссылки? Моя декларация для React.createRef () находится в Constructor () {} для первых 2 ссылок.
Вопрос в том, где я могу создать ссылки для сборщиков времени, которые добавляются на клик?

Спасибо вы

Ответы [ 3 ]

2 голосов
/ 31 января 2020

Вы должны обернуть свой таймер в другой компонент, создать там ссылку и выполнить работу, которая требует ссылки внутри этих компонентов, а затем переслать результат через реквизит (вы можете передать функцию через реквизит).

Например, вы можете присвоить каждому компоненту уникальный идентификатор (uuid отлично справится с этим), передать его через реквизит, передать значение и передать функцию, которая принимает идентификатор и значение, а затем вызывать эту функцию всякий раз, когда результат из ссылки получен.

1 голос
/ 31 января 2020

Вы можете сделать что-то подобное, но для этого требуется, чтобы у вас был уникальный идентификатор для компонента, который не должен быть индексом. (Потому что это может измениться)

Псевдокод 

class Wrapper extends Component {
   construct() {
      ...
      this.refsById = {}
   }
   getRefOrCreate(id) {
    if(_has(this.refsById[id]) {
       return this.refsById[id];
    } else {
       this.refsById[id] = React.createRef();
       return this.refsById[id];
    } 
   } 

  onClickHandler(value, id) {
      const ref = this.refs[id];
      const { onClick } = this.props;
 }

  render(){
     // Here you need to know how many pickers you need, and their id
    const { pickersInformationArray} = this.props; 
    return (
      <div> { pickersInformationArray.map((id) => <TimePicker ref={this.getRefOrCreate(id);} onClick={(value) => { this.onClickHandler(value, id); } } )} </div>
    )
  }
0 голосов
/ 31 января 2020

Я нашел решение. Позвольте мне сначала сказать, что я использовал метод создания ref в конструкторе в моем неверном решении 

 class DummyClass extends Component {
     constructor(){ 
         this.timePickerRef = React.createRef();
     }
 }

 render() {
    let timers = array.map( index => {
         <TimePicker
              ref={timepicker => timePickerRef = timepicker} 
              value={00}
              onChange={(data) => 
                      {this.handleTimePcikerValueChange(data, index);}}
         />
    } 
   return (
         timers
   )
 }
}

, что я вместо этого сделал следующим образом:

игнорировать и удалить this.timePickerRef = React .createRef (), поскольку больше не будет необходимости

, тогда как код в handleTimePcikerValueChange & render будет выглядеть следующим образом: 

handleTimePcikerValueChange = (value, index) => {
  // do whatever manipulation you need
  // and access the ref using the following
  this[`timePicker_${index}`] 
}
render() {
    let timers = array.map( index => {
         <TimePicker
              ref={timepicker => this[`timePicker_${index}`] = timepicker} 
              value={00}
              onChange={(data) => 
                      {this.handleTimePcikerValueChange(data, index);}}
         />
    } 
   return (
         timers
   )
 }

Я не публиковал код, который обрабатывает добавление средств выбора времени потому что это не имеет значения. Я хотел бы поблагодарить тех, кто откликнулся!

...