时间戳

首页 > 解决方案 > 如何在反应选择上仅设置值

reactjs - 如何在反应选择上仅设置值

问题描述

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

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

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

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

如何将 fieldValue 设置为

reactSelectField: ['chocolate', 'strawberry']

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

标签： reactjsreact-selectreact-hook-form

解决方案

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

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

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

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

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"]
  }}
/>

推荐阅读