我怎样才能只设置反应 select 的值

Question

我在表单上使用带有 isMulti 属性的 react-select。为简单起见，数据如下

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

如果我 select 前两个选项然后提交表单，则 react-select 字段将具有以下值

reactSelectField: [
   { value: 'chocolate', label: 'Chocolate' },
   { value: 'strawberry', label: 'Strawberry' }
]

如何将字段值设置为

reactSelectField: ['chocolate', 'strawberry']

哪个实际上是选项的值而不是整个对象？

Answer 1

您可以使用 onChange 和表单状态自行转换值

const [values, setValues] = React.useState([]);

<Select 
  options={options}
  value={values.map((value) => ({ 
    label: value, 
    value,
  })}
  onChange={(values) => { 
    setValues(values.map((option) => option.value));
  }}
/>

或者创建您自己的包装器以return您期望的格式的值

const MyMultiSelect = ({ values = [], options = [], onChange, ...props }) => (
  <Select 
    {...props} 
    value={values.map((value) => ({ 
      label: value, 
      value,
    })}
    options={options.map((value) => ({
      label: value,
      value,
    })}
    onChange={(values) => { 
      onChange(values.map((option) => option.value));
    }}
  />
)

// Usage
<MyMultiSelect
  options={["chocolate", "strawberry", "banana"]}
  values={["chocolate", "banana"]}
  onChange={(values) => {
    console.log(values); // ["chocolate", "banana"]
  }}
/>

我怎样才能只设置反应 select 的值

How can i set only value on react select

reactjs

react-select

react-hook-form