如何在 React 中的功能组件中获取 select onChange 的值答案

【问题标题】：How to Get value of select onChange in Functional Component in React如何在 React 中的功能组件中获取 select onChange 的值
【发布时间】：2022-01-11 09:03:04
【问题描述】：

我正在使用带有 react 的 ant design pro 创建表单，但我无法使用钩子保存选择的值。 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>
  );
};

【问题讨论】：

您的意思可能是onChange 而不是onSelect？自The select event only fires after text inside an <input type="text"> or <textarea> is selected.
哎呀。我完全忘记了 react props != DOM 事件。请随意忽略我的评论。

标签： javascript reactjs ant-design-pro

【解决方案1】：

如果你阅读了Select的文档，onSelect方法会被选择元素的值调用。

onSelect 选择选项时调用，参数为选项的值（或键）和选项实例
function(string | number | LabeledValue, option: Option)

你想要的

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

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

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

【讨论】：

感谢您的回答。它解决了我的问题。