'ref is not prop' даже при использовании примера ref из документации

Question

Я получаю это предупреждение:

Warning: CreatableSelect: `ref` is not a prop. Trying to access it will result in `undefined` being returned.

Я использую ref по назначению, поскольку документация гласит , в значительной степени копирование и вставка из документов (за исключением того, что оно используется для компонента, а не для базового узла DOM).

Но все же реагирует, думает, что я глупый и не знаю, что ссылка зарезервирована. Как мне среагировать, что я использую ref в качестве обратного вызова ref, а не для другой неправильной цели?

Код работает отлично, единственная проблема - ошибка в консоли.

class SearchableSelect extends Component {
  constructor(props) {
    super(props);
    this.selector = null;
    this.setSelectorRef = element => {
      this.selector = element;
    };
  }

  handleBlur() {
    const { inputValue } = this.selector;
    this.selector.createNewOption(inputValue);
  }

  render() {
    const { formatMessage } = this.props.intl;
    const placeholder = this.props.placeholder ? formatMessage({ id: this.props.placeholder }) : '';

    return (
      <Creatable
        value={this.props.value}
        placeholder={placeholder}
        options={this.props.options}
        arrowRenderer={null}
        onChange={this.props.onChange}
        onBlurResetsInput={false}
        clearable= {false}
        noResultsText= {null}
        promptTextCreator= {(label) => {return formatMessage({ id: 'searchable.addNew' }) + ' ' + label;}}
        autoBlur= {true}
        onBlur={() => this.handleBlur()}
        ref={this.setSelectorRef}
        onFocus= {this.props.onFocus}
        autosize= {false}
        style= {this.props.style}
      >
        {this.props.children}
      </Creatable>
    );
  };
};

Фрагмент из другого файла, в котором находится этот компонент:

<Control
  model=".assetTag"
  component={SearchableSelect}
  mapProps={{
    value: props => props.viewValue
  }}
  controlProps={{
    placeholder: 'device.assetTagPlaceholder',
    options: this.state.assetTagOptions,
    onChange: this.autoFillFields.bind(this),
    onFocus: this.updateOptions.bind(this)
  }}
  style={{ border: this.state.missing.assetTag ? '1px dotted red' : '' }}
/>

Answer 1

Я боюсь, что он жалуется на эту строку

const { inputValue } = this.selector;

, которая равна

const inputValue = this.selector.inputValue;

Доступ к дочернему свойству (или метод) обычно (кроме особых случаев, например focus()) признак плохой структуры - состояние должно быть поднято .Передача обработчиков помогает поднять состояние.К сожалению, как вы писали, событие onBlur не передает значение обработчику, но мы можем получить входное значение раньше (и сохранить его в состоянии).Пример обработчика onKeyDown ( последний ) показывает, что его просто расширить с помощью обработчика onBlur:

handleKeyDown = (event: SyntheticKeyboardEvent<HTMLElement>) => {
  const { inputValue, value } = this.state;
  if (!inputValue) return;
  switch (event.key) {
    case 'Enter':
    case 'Tab':
      console.group('Value Added');
      console.log(value);
      console.groupEnd();
      this.setState({
        inputValue: '',
        value: [...value, createOption(inputValue)],
      });
      event.preventDefault();
  }
};

handleOnBlur = () => {
  const { inputValue, value } = this.state;
  if (!inputValue) return;
  console.group('Value Added');
  console.log(value);
  console.groupEnd();
  this.setState({
    inputValue: '',
    value: [...value, createOption(inputValue)],
  });
};

IMHO Tab и Enter довольно хорошиoptions (UX).

Есть еще несколько возможностей / реквизитов: isValidNewOption, getNewOptionData - второй вариант кажется более подходящим («проверенный»), чем использование ref и доступ к вводу rawзначение.

Вам не нужно использовать метод createNewOption, так как все options передаются как проп - вы можете изменить переданный массив.