antd 获取select的值

antd 是一个非常流行的 React UI 库,它提供了很多常用的 UI 组件,包括 Select 组件。在使用 Select 组件时,你可以通过以下两种方式获取当前选中的值:

  • 使用 onChange 事件
  • 当用户选择一个选项时,Select 组件会触发 onChange 事件。你可以在事件处理函数中获取当前选中的值。示例如下:

    import { Select } from 'antd';
    function handleChange(value) {
      console.log(`selected ${value}`);
    <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
      <Option value="jack">Jack</Option>
      <Option value="lucy">Lucy</Option>
      <Option value="disabled" disabled>
        Disabled
      </Option>
      <Option value="Yiminghe">yiminghe</Option>
    </Select>
    

    在这个例子中,我们定义了一个 handleChange 函数,它接受一个参数 value,这个参数就是当前选中的值。当用户选择一个选项时,Select 组件会触发 handleChange 函数,并将当前选中的值传入函数中。

  • 使用 ref
  • 你也可以使用 ref 获取 Select 组件的实例,然后通过调用实例的 getFieldValue 方法获取当前选中的值。示例如下:

    import { Select } from 'antd';
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.selectRef = React.createRef();
      handleClick = () => {
        const { value } = this.selectRef.current.getFieldValue();
        console.log(`selected ${value}`);
      render() {
        return (
            <Select ref={this.selectRef} defaultValue="lucy" style={{ width: 120 }}>
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
              <Option value="disabled" disabled>
                Disabled
              </Option>
              <Option value="Yiminghe">yiminghe</Option>
            </Select>
            <button onClick={this.handleClick}>获取选中值</button>
          </div>
    

    在这个例子中,我们通过调用 React.createRef() 创建了一个 ref,然后将它传递给 Select 组件的 ref 属性。在 handleClick 函数中,我们通过调用 getFieldValue 方法获取当前选中的值,并将其输出到控制台中。

    希望这些信息能够帮到你。如果你还有其他问题,请继续提问。

  •