Question

我收到此警告：

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

我以预定的方式使用ref作为documentation says，从文档中复制了很多副本（除非它用于组件，而不是基本的DOM节点）。

但仍然有反应认为我很傻，不知道ref是保留的。我该如何反应我将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传递-您可以修改传递的数组。

即使使用docs

1 个答案: