即使从docs中使用ref示例，'ref也不是prop'

Question

我收到这个警告：

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

我使用ref作为documentation says的预期方式，几乎从docs复制粘贴（除了它用于组件，而不是基本的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处理程序示例（the last one）显示，使用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)],
  });
};

恕我直言Tab和Enter是相当不错的选择（UX）。

还有一些其他的可能性/道具：isValidNewOption，getNewOptionData - 第二个似乎是比使用ref和访问raw输入值更好的选择（'验证'）。

您不必使用createNewOption方法，因为所有options都作为prop传递 - 您可以修改传递的数组。