Form.Item中有多个控件时处理,Form.getFieldValue('name')取不到值的情况

71 阅读1分钟

Form.Item中有多个控件时处理,Form.getFieldValue('name')取不到值的情况

需求是:在表单中有一个可输入可滑动的透明度的表单项,即一个表单项下面存在多个输入控件的时候; 问题:那么应该如何获取值?

image.png

一般实现方式如下:


const [stlConfigInputOpacity, setStlConfigInputOpacity] = useState(1);
const handleOpacityChange = (newValue: number) => {
    setStlConfigInputOpacity(newValue);
  };
  //最开始是写成如下形式,获取不到对应的name值:
  <Form.Item label="透明度" name='opacity'>
        <Row>
          <Col span={12}>
              <Slider
                min={1}
                max={100}
                onChange={handleOpacityChange}
                value={typeof stlConfigInputOpacity === 'number' ? stlConfigInputOpacity : 0}
              />
          </Col>
          <Col span={4}>
            <InputNumber
              min={1}
              max={100}
              style={{ margin: '0 16px' }}
              value={stlConfigInputOpacity}
              onChange={handleOpacityChange}
            />
          </Col>
        </Row>
  </Form.Item>

按照上述的代码是不能通过Form.getFieldValue('opacity')获取到透明度的值,解决方案如下,即给需要获取到的控件外面嵌套一层Form.Item标签即可

      <Form.Item label="透明度">
        <Row>
          <Col span={12}>
            <Form.Item name="stlConfigOpacity">
              <Slider
                min={1}
                max={100}
                onChange={handleOpacityChange}
                value={typeof stlConfigInputOpacity === 'number' ? stlConfigInputOpacity : 0}
              />
            </Form.Item>
          </Col>
          <Col span={4}>
            <InputNumber
              min={1}
              max={100}
              style={{ margin: '0 16px' }}
              value={stlConfigInputOpacity}
              onChange={handleOpacityChange}
            />
          </Col>
        </Row>
      </Form.Item>