Question

我正在使用react-select作为自动完成和与选项相关的字段。在单选中，以下代码仅适用于将值作为字符串发送，但如果我希望将值作为对象，则在多行中它不起作用。

这是代码

const normalizedValue = (input, options, valueType, isMulti) => {
  if (valueType === "string" && !isMulti) {
    options.find(option => option.value === input.value);
  }
  if (valueType === "string" && isMulti) {
    console.log("input value", input);
    options.filter(option => option.value === input.value);
  }

  if (valueType === "object" && !isMulti) {
    options.find(option => option === input.value);
  }

  if (valueType === "object" && isMulti) {
    options.filter(option => option === input.value);
  }
};

const SearchableTextField = ({
  children,
  input,
  options,
  isMulti,
  valueType,
  ...props
}) => {
  return (
    <Select
      {...props}
      clearable={props.clearable}
      searchable={props.searchable}
      options={options}
      {...input}
      value={normalizedValue(input, options, valueType, isMulti)}
      onChange={option =>
        valueType === "string"
          ? input.onChange(option.value)
          : input.onChange(option)
      }
      onBlur={() => input.onBlur(input.value)}
      isMulti={isMulti}
    />
  );
};

const MyForm = reduxForm({ form: "MyForm" })(
  class extends React.PureComponent {
    handleSubmit(values) {
      console.log("values", values);
    }
    render() {
      const { handleSubmit } = this.props;
      return (
        <form onSubmit={handleSubmit(this.handleSubmit.bind(this))}>
          <Field
            name="myCoolSelect"
            component={SearchableTextField}
            options={[
              { value: "chocolate", label: "Chocolate" },
              { value: "strawberry", label: "Strawberry" },
              { value: "vanilla", label: "Vanilla" }
            ]}
            valueType="string"
            isMulti
          />
          <button type="submit">SUbmit</button>
        </form>
      );
    }
  }
);

如果我有以下选择

options = [
 {value: 'abc', label: 'ABC'},
 {value: 'abc2', label: 'ABC2'},
]

我选择假定第一个选项时的预期输出选择选项：有效的单个选择中应选择“ abc”，应选择多个选择中的选项：[“ abc”，“ abc2”]（不起作用）

我在沙箱https://codesandbox.io/s/wnvpnlj245中也有可复制的代码

Answer 1

问题在这里

  onChange={option =>
    valueType === "string"
      ? input.onChange(option.value)
      : input.onChange(option)
  }

您还需要在此处检查其是否为多行。因为当它多倍时，它将值作为数组传递。

尝试

 onChange={option => {
    valueType === "string"
      ? input.onChange(isMulti ? option.map(o => o.value) : option.value)
      : input.onChange(option)
    }
  }

无法将值设置为字符串而不是多选对象

1 个答案: