Ant 设计中带有单选按钮的动态表单

Question

我正在尝试使用单选按钮创建一个动态表单。 我无法获得单选的值，以及如何只设置 1 个选中的单选按钮。

当我添加另一个字段并单击单选按钮时，其他单选按钮将被取消选中

<Form.List
            name="categories"
          >
            {(fields, {add, remove}) => (
              <>
                {fields.map(field => (
                  <Space key={field.key} style={{display: 'flex', marginBottom: 8}} align="baseline">
                    <Form.Item
                      {...field}
                      name={[field.name, 'first']}
                      fieldKey={[field.fieldKey, 'first']}
                      rules={[{required: true, message: 'Missing first name'}]}
                    >
                      <Input placeholder="First Name" />
                    </Form.Item>
                    <Form.Item
                      {...field}
                      name={[field.name, 'last']}
                      fieldKey={[field.fieldKey, 'last']}
                      rules={[{required: true, message: 'Missing last name'}]}
                    >
                      <Input placeholder="Last Name" />
                    </Form.Item>
                    <Form.Item
                      {...field}
                      name={[field.name, 'main']}
                      fieldKey={[field.fieldKey, 'main']}
                      initialValue={false}
                      onChange={(e) => form.resetFields()}
                    >
                      <Radio defaultChecked={false}>Main</Radio>
                    </Form.Item>
                    <Form.Item
                      {...field}
                      name={[field.name, 'status']}
                      fieldKey={[field.fieldKey, 'status']}
                      initialValue={true}
                      valuePropName="checked"
                    >
                      <Switch defaultChecked />
                    </Form.Item>
                    <MinusCircleOutlined onClick={() => remove(field.name)} />
                  </Space>
                ))}
                <Form.Item>
                  <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
            Add field
                  </Button>
                </Form.Item>
              </>
            )}
          </Form.List>

Answer 1

我们是如何做到这一点的，但问题是当一个单选按钮被选中时，它的值发生了变化，但是当我们检查另一个单选按钮时，当前选中的按钮值和以前的单选按钮值保持不变。 如果选中了其他单选按钮，我想要的只是更改单选按钮的值。 意味着我添加了一个字段，并且在该字段中我检查了单选按钮，然后我创建了另一个字段，然后检查了该字段中的单选按钮，前一个字段中的单选按钮变为未选中，但该单选按钮的值不改变。 单击此处检查代码。

    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 Demo = () => {
          const onFinish = (values) => {
            console.log('Success:', values);
          };
          const onFinishFailed = (errorInfo) => {
            console.log('Failed:', errorInfo);
          };
          const handleChange=(val)=>{
        console.log(val.target)
          }
          return (
            <Form
              name="basic"
              labelCol={{
                span: 8,
              }}
              wrapperCol={{
                span: 16,
              }}
              initialValues={{
                remember: true,
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
            <Form.List
                      name='emails'
                      rules={[
                        {
                          validator: async (_, emails) => {}
                        }
                      ]}
                    >
                      {(fields, { add, remove }, { errors }) => (
                        <>
                          {fields.map(({ key, name, fieldKey, ...restField }) => (
                            <div key={key}>
                              <Form.Item
                                label='Email'
                                {...restField}
                                name={[name, 'email']}
                                fieldKey={[fieldKey, 'email']}
                              >
                                <Input placeholder='Enter Email ' />
                              </Form.Item>
                              <Form.Item
                                label='Type'
                                {...restField}
                                name={[name, 'emailType']}
                                fieldKey={[fieldKey, 'emailType']}
                              >
                                <Select>
                                  <Select.Option value='Home'>Home</Select.Option>
                                  <Select.Option value='Work'>Work</Select.Option>
                                  <Select.Option value='Other'>Other</Select.Option>
                                </Select>
                              </Form.Item>
                              <Form.Item
                                label='Primary or Not'
                                name={[name, 'e_Primary']}
                                fieldKey={[fieldKey, 'e_Primary']}
                              >
          <div className="form-check">
          <Input 
          // onChnage={change}   
          className="form-check-input"  type="radio" name="e_Primary" id={`${key}`}/>
          <label htmlFor={`${key}`} className="form-check-label" >
            Primary
          </label>
        </div>
                              </Form.Item>
                              {fields.length > 0 ? (
                                <Form.Item
                                  wrapperCol={{
                                    xs: { span: 24, offset: 0 },
                                    sm: { span: 16, offset: 19 }
                                  }}
                                >
                                  <Button
                                    className='d-flex'
                                    type='link'
                                    onClick={() => remove(name)}
                                   >
                                    Remove Email
                                  </Button>
                                </Form.Item>
                              ) : null}
                            </div>
                          ))}
                          <Form.Item
                            // style={{marginTop:"-80px"}}
                            wrapperCol={{
                              xs: { span: 24, offset: 0 },
                              sm: { span: 16, offset: 19 }
                            }}
                          >
                            <Button type='link' onClick={() => add()} >
                              Add Email
                            </Button>
                            <Form.ErrorList errors={errors} />
                          </Form.Item>
                        </>
                      )}
                    </Form.List>
              <Form.Item
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Button type="primary" htmlType="submit">
                  Submit
                </Button>
              </Form.Item>
            </Form>
          );
        };
        ReactDOM.render(<Demo />, document.getElementById('container'));


  [1]: https://stackblitz.com/edit/react-2v1yww?file=index.js