Form.Item中有多个控件时处理,Form.getFieldValue('name')取不到值的情况
需求是:在表单中有一个可输入可滑动的透明度的表单项,即一个表单项下面存在多个输入控件的时候; 问题:那么应该如何获取值?
一般实现方式如下:
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>