如何在React的函数式组件中获取select onChange的值

Question

我正在使用 ant design pro 和 react 来创建表单，但我无法使用挂钩保存 select 的值。 i 显示错误error

const ExistingGroup = (props) => {
  const [group,setGroup] = useState([]);

  const saveGroup = (event) => {
    setGroup(event.target.value);
  }
  return (
    <PageContainer header={{ title: '' }} ghost>
      <Card bordered={false} style={{ width: '100%' }}>
        <Form>
          <Form.Item>
            <Select value={group} onSelect={saveGroup}>
              <Option value='1'>1</Option>
              <Option value='2'>2</Option>
            </Select>
            {group}
          </Form.Item>
        </Form>
      </Card>
    </PageContainer>
  );
};

Answer 1

如果您阅读了 Select 的文档，则会使用所选元素的值调用 onSelect 方法。

onSelect Called when an option is selected, the params are option's value (or key) and option instance
function(string | number | LabeledValue, option: Option)

所以你想要

const saveGroup = (value) => {
  setGroup(value);
}

此外，由于它不是多选，您应该为 group 使用单个值而不是数组。

const [group,setGroup] = useState(null);

如何在React的函数式组件中获取select onChange的值

How to Get value of select onChange in Functional Component in React

javascript

reactjs

ant-design-pro