React - Ant Design Form-Item 名称道具损坏 Select 值

Question

我正在使用 antD，如果我在表单项中使用 select 组件，并且如果此表单项具有 name作为道具，我无法在页面呈现时为我的 select 组件设置值。

把我想说的说清楚，我准备了一个例子，你可以复制粘贴到codesandbox之类的

    import React from 'react';
    import ReactDOM from 'react-dom';
    import 'antd/dist/antd.css';
    import './index.css';
    import { Form, Input, Button, Select } from 'antd';
    const { Option } = Select;
    
    
    export const Demo =()=> {
      let formRef = React.createRef();
        return (
          <Form ref={formRef} name="control-ref">   
            <Form.Item 
              label="Gender"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Select value="male">
                <Option value="male">male</Option>
                <Option value="female">female</Option>
                <Option value="other">other</Option>
              </Select>
            </Form.Item>       
          </Form>
        );
    }
    
    ReactDOM.render(<Demo />, document.getElementById('container'));

如果您尝试在本示例中为表单项提供名称道具，您的 select 组件的初始值将不会被设置。更多使用钩子并没有解决我的问题。

Answer 1

我不完全理解你的问题，但就我所知，我会尽力提供帮助。

你可以试试useRef.

import React,{useRef, useEffect} from 'react';

 export const Demo =()=> {
     var formRef = useRef();

      useEffect(() => {
      formRef.current.setFieldsValue({
     select:"male"
     })
  });
      
    <Form ref={formRef} name="control-ref">   
                <Form.Item 
                  label="Gender"
                   name="select"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Select>
                    <Option value="male">male</Option>
                    <Option value="female">female</Option>
                    <Option value="other">other</Option>
                  </Select>
                </Form.Item>       
    </Form>
);}

不要忘记给出相关Form.Item的name。

React - Ant Design Form-Item 名称道具损坏 Select 值

React - Ant Design Form-Item name props broke Select value

reactjs

antd

react-hooks

react-functional-component