React - Ant Design Form-Item name props 破坏了 Select 值

Question

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

把我想说的说清楚，我准备了一个例子，你可以复制粘贴到codeandbox等。

    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'));

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

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。