onChange 反应选择 isMulti Component

Question

我正在使用反应选择。根据官方文档，我应该使用“isMulti”来获得多个选项。

这是我创建的组件。

import React from 'react';
import { Form } from 'react-bootstrap';
import Select from 'react-select';

function SelectBoxMulti({
  name,
  options,
  isClearable,
  value,
  placeholder,
  handleChange,
  label,
}) {
  return (
    <Form.Group className='mb-2'>
      {label && <Form.Label>{label}</Form.Label>}
      <Select
        name={name}
        isClearable={isClearable}
        placeholder={placeholder}
        options={options}
        onChange={handleChange}
        value={value}
        isMulti
      />
    </Form.Group>
  );
}

export default SelectBoxMulti;

这是表格

const [listTalents, setListTalents] = useState([]);

const [form, setForm] = useState({
 talent: [
  {
    label: '',
    value: '',
  },
 ],
});

const getAPIListTalents = async () => {
 const res = await getData('/v1/cms/talents');
 const temp = [];
  res.data.data.forEach((res) => {
    temp.push({
     value: res._id,
      label: res.name,
      target: {
        value: res._id,
        name: 'talent',
      },
    });
  });
  setListTalents(temp);
};

const handleChangeTalent = (e, i) => {
  let _tempt = [...form.talent];
  if (e.target.name === 'talent') {
    _tempt[i][e.target.name] = e;
  }
  setForm({ ...form, talent: _tempt });
}

<SelectBoxMulti
  label={'Speaker'}
  placeholder={'Masukan pembica'}
  name='talent'
  value={form.talent}
  options={listTalents}
  isClearable={true}
  onChange={handleChangeTalent}
/>

当我尝试运行它时，从 console.log(form) 的表单中没有读取任何值。我需要帮助设置 onChange 以使该选择框按我希望的方式工作。

Answer 1

您向选择组件传递了错误的 onChange 属性，没有传递给 SelectBoxMulti 组件的 handleChange 属性。

<SelectBoxMulti
  label={"Speaker"}
    placeholder={"Masukan pembica"}
    name="talent"
    options={listTalents}
    isClearable={true}
    handleChange={handleChange}
 />