Как создать и назначить переменную в карте (), которая находится в render ()?

Question

Ниже приведен код, над которым я работаю (я сократил его, чтобы сделать его читаемым).

  render() {
    return (
      <Table.Row>

        { MONTHS.map(month => [ // live forecast, actuals and vs forecasts cells per month
          <Table.Cell className="live-forecast-cell">
            <Input
              ref={el => { this.inputRef[uuid()] = el; }}
              onFocus={e => this.handleLiveForecastFocus(supplierName, month, e)}
            />
          </Table.Cell>,
        ]) }
      </Table.Row>
    );
  }

В операции карты я генерирую значение uuid () для ссылки. Затем мне нужно передать это же значение ref в метод обработчика onFocus. Как мне этого добиться? Цени любой совет.

Answer 1

1. Вы можете использовать закрытие

render() {
  return (
    <Table.Row>

      { MONTHS.map(month => {
        const id = uuid();
        return [ // live forecast, actuals and vs forecasts cells per month
        <Table.Cell className="live-forecast-cell">
          <Input
            ref={el => { this.inputRef[id] = el; }}
            onFocus={e => {
              this.handleLiveForecastFocus(supplierName, month, e);
              // this.inputRef[id]
            }}
          />
        </Table.Cell>,
      ];}) }
    </Table.Row>
  );
}

Вы можете проверить этот аргумент e в вашем обработчике onFocus - этот объект имеет ссылку на элемент DOM (что-то вроде e.target)

Answer 2

render() {
  return (
    <Table.Row>
    { MONTHS.map(month => { // live forecast, actuals and vs forecasts cells per month
      const uuidValue = uuid()
      return (
        <Table.Cell className="live-forecast-cell" key={'ADD_A_UNIQUE_KEY_HERE'}>
          <Input
            ref={el => { this.inputRef[uuidValue] = el; }}
            onFocus={e => this.handleLiveForecastFocus(supplierName, month, e, uuidValue)} 
          />
        </Table.Cell>
      )
    }) }
  </Table.Row>
);
}