Question

这是我的可创作组件：

function optionsForSelect(field) {
  return field
    .values
    .map((fieldOption) => {
      return {value: fieldOption, label: fieldOption};
    });
}

function PatientSelectInput({field, options, value, onChange, disabled}) {
  const className = field.id + '-select';
  return (
    <label className={cx('input-label', className)}>
      <div className="label-text">{field.displayName}</div>
      <Creatable
        value={value}
        onChange={(selectedValue) => onChange(selectedValue ? selectedValue.value : null)}
        disabled={disabled}
        onBlurResetsInput={false}
        onCloseResetsInput={false}
        options={options} />
    </label>
  );
}

它是一个功能组件。当它渲染时，我可以创建一个新选项但是当我点击选项卡或输入或单击自动生成的“创建选项...”时，新创建的选项会消失。我只想要默认行为。

我错过了什么？

Answer 1

不幸的是，此版本的react-select对其options属性进行了变异。这是非常糟糕的编码，已在版本2中修复：https://github.com/JedWatson/react-select/issues/2484

您遇到的问题来自于构建选项的方式。您的函数在每个渲染上创建一个新对象，替换包含刚创建的选项的数组。

如果您无法更新版本，建议您将optionsForSelect的输出保存到this.state.options，然后将状态变量传递给react-select。这样做的结果是您仍然可以对元素的状态进行突变，并限制了突变的影响。

React-select Creatable组件不以默认方式运行

1 个答案: