如何实现Form 中进行嵌套组件并收集form 数据

[chenJJ-88]

如图：

zhwhis这是我需要做的效果图，想要实现最后点击提交时，能拿到参与规则1数据--包含用户选择的规则项以及对应项后面的数值，这是我目前的想法，出现的问题是点击第一个，第二个也会被勾选上，小白求大佬解惑，谢谢谢谢谢！！！！

[Wxh16144]

直接贴代码片段，截图（而且还不带行号）看了头疼，我都想本地验证之后给你回复。但是手动输入太吃力了。

你的。form.item name="rule" 下面的 children 是一个受控组件，可以吧这个 name=“rule” 移除掉，不填 name

[chenJJ-88]

<Form.Item name="rules" label="参与规则" style={{ position: 'absolute', top: '130px', left: 13 }}>
        <Checkbox.Group>
          <Row>
            <Col span={24}>
              <Form.Item noStyle name={['rules', 'maxtype']} >
                <Checkbox value="max" style={{ lineHeight: '32px' }}>
                  每个账号每天至多填写
                </Checkbox>
              </Form.Item>

              <Form.Item noStyle name={['rules', 'minnumber']}>
                <InputNumber step={1} size="small" style={{ marginLeft: 11 }} />次
              </Form.Item>

            </Col>
            <Col span={24}>
              <Form.Item noStyle name={['rules', 'mintype']} >
                <Checkbox value="min" style={{ lineHeight: '32px' }}>
                  每个账号每天最多填写
                </Checkbox>
              </Form.Item>

              <Form.Item noStyle name={['rules', 'minnumber']}>
                <InputNumber step={1} size="small" style={{ marginLeft: 11 }} />次
              </Form.Item>
            </Col>
            <Col span={24}>
              <Checkbox value="none" style={{ lineHeight: '32px' }}>
                无限制
              </Checkbox>
            </Col>
          </Row>
        </Checkbox.Group>
      </Form.Item>
      
      
      这样的代码 ，我尝试了去掉数组中的rules 还是不行

[Wxh16144]

你的代码有几个问题：

1. Formt.Item 套的 Checkbox.Group 和下面的 Form.Item 嵌套是不允许的，有点混乱

2. Form.Item 的 children 必须是一个受控子组件（控制台有错误警告）

  <Form.Item noStyle name={['rules', 'minnumber']}>
      <InputNumber step={1} size="small" style={{ marginLeft: 11 }} />次
  </Form.Item

写了一段比不那么好的代码：

import React from 'react';
import { Form, Input, Checkbox, Button, Row, Col, InputNumber } from 'antd';

function App() {
  return (
    <Form
      name='form'
      onFinish={(values) => {
        console.log('value', values)
      }}
    >
      <Form.Item name="name">
        <Input />
      </Form.Item>

      <Form.Item label="参与规则" style={{ position: 'absolute', top: '130px', left: 13 }}>
        <Row>
          <Col span={24}>
            <Form.Item noStyle name={['rules', 'maxtype']} valuePropName='checked'>
              <Checkbox value="max" style={{ lineHeight: '32px' }}>
                每个账号每天至多填写
              </Checkbox>
            </Form.Item>

            <Form.Item noStyle name={['rules', 'maxnumber']}>
              <InputNumber step={1} size="small" style={{ marginLeft: 11 }} suffix="次" />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item noStyle name={['rules', 'mintype']} valuePropName='checked' >
              <Checkbox value="min" style={{ lineHeight: '32px' }}>
                每个账号每天最多填写
              </Checkbox>
            </Form.Item>

            <Form.Item noStyle name={['rules', 'minnumber']} >
              <InputNumber step={1} size="small" style={{ marginLeft: 11 }} suffix="次" />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item noStyle name={['rules', 'none']} valuePropName='checked'>
              <Checkbox value="none" style={{ lineHeight: '32px' }}>
                无限制
              </Checkbox>
            </Form.Item>
          </Col>
        </Row>
      </Form.Item>

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

export default App;

[Wxh16144]

如果你的这个表单项是一个对象，可以尝试自定义一个可受控的表单控件

[chenJJ-88]

好的谢谢大佬，我再请教一下这个没有name的话，如何做校验呢，他是必填，至少需要选择一个，然后选择了对应的输入框需要输入，真的打扰了

[Lpbzzz]

想要rule的能力得有name的吧