Antd Select 不设置初始值

Question

我在 antd Select 中设置初始值时遇到问题

const options=[{name:'john',id:1},{name:'jack',id:2},{name:'jill',id:3}]
   <Form initialValues={{user:3}}>
    <Form.Item name="user" label="Select user">
        <Select value="3">
        {options.map((user,index)=><Option key={index} value={user.id}>{user.name}</Option>)}
        </Select>
    </Form.Item>
   </Form>

它不是选择初始值。 在这方面的任何想法。 这是实现它的正确方法吗，请帮助

Answer 1

下面是Antd形式的Select组件的简单demo我想知道选项是来自商店还是来自其他组件？ 因此，一旦安装表单，表单就不会获得初始值。 如果它来自其他来源，则需要订阅初始值，如果它更改以重置 antd 表单，例如

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button, Checkbox, Select } from 'antd';
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
// useEffect(() => {
  //   form.resetFields()
  //   form.setFieldsValue({
  //     productName: productName
  //   })
  // }, [initialValues]);
const userNameOptions = [{name:'john',id:1},{name:'jack',id:2},{name:'jill',id:3}]
const Demo = () => {
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true,
        username: 3
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Select value='3'>
          {userNameOptions.map((item, index) => (
            <Select.Option key={index} value={item.id}>
              {item.name}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item {...tailLayout} name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, document.getElementById('container'));

Answer 2

我在 ant design 4 中有这个工作。我在道具中传递初始值，值为 userBuildingName，如果道具存在，我设置一个默认值：

defaultValue={!!props.userBuildingName && props.userBuildingName}

整个选择框代码在这里：

 <Form.Item name="claimId" rules={[{ required: true, message: "Please enter the building to manage" }]}>
                        <Select placeholder="Please enter the building to manage"
                            defaultValue={!!props.userBuildingName && props.userBuildingName}
                            disabled={!!props.modalCRUD.includes("View")}
                        >
                            {!!props.userBuildings && props.userBuildings.map((building) => <Select.Option key={building.id} value={building.id}>{building.name}</Select.Option>)}
                        </Select>
                    </Form.Item>