即使使用文档中的 ref 示例，“ref 也不是道具”

Question

我收到此警告：

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

我以 documentation says 的预期方式使用 ref，几乎从文档中复制粘贴（除了它用于组件，而不是基本 DOM 节点）。

但仍然反应认为我很傻，不知道 ref 是保留的。 我如何告诉 react 我正在使用 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 都作为道具传递 - 您可以修改传递的数组。