reactjs 完成时未收到Antd表单值

gcxthw6b 于 2023-01-30 发布在 React

关注(0)|答案(1)|浏览(177)

我正在开发一个使用Antd的管理门户网站，这是我在设计中需要的东西。

我设法使用以下代码开发了这个设计

<Form
labelWrap
wrapperCol={{ span: 24 }}
initialValues={detail && detail.object}
onFinish={handleEdit}>
<Row gutter={100}>
    <Col span={12}>
        <Item
            labelCol={{ span: 7 }}
            label='Status'
            name='status'
            valuePropName='checked'
            required>
            <Space> //-----------#1
                <p className='text-green'>Active</p> //--------#2
                <Switch defaultChecked={detail && detail.object.status} />
                <p className='text-red'>Inactive</p> //------------#3
            </Space> //---------#4
        </Item>
    </Col>
</Row>
</Form>

但是当我尝试处理submit函数时，我没有得到switch元素的值，而是以undefined的形式出现。

const handleEdit = async (values) => {
    console.log(values);
};

但是，当Switch组件是Item的直接子组件时，我通过删除注解行#1、#2、#3、#4正确地获得了状态值。
我尝试使用form.getFieldsValue()方法，但也没有用。
有没有什么方法可以让我以期望的方式得到这个值？

reactjs

来源：https://stackoverflow.com/questions/75267236/antd-form-value-not-received-onfinish

1条答案

按热度按时间

mzmfm0qo1#

当您将name属性传递给Form.Item时，Form.Item的第一个子代将由Form.Item控制。由于Switch不是Form.Item的第一个子代，因此它不受Form.Item控制，并且您不会获得值status。有两种可能的解决方案：
解决方案1：使用Form.Item和noStyle prop进行布局设计（可以按照此示例复杂表单控件）
解决方案2：创建一个自定义组件来接收value和onChange属性。示例

import { Col, Form, Row, Space, Switch } from 'antd';

const { Item } = Form;

const CustomSwitch = ({ value, onChange }) => {
    return (
        <Space>
            <p className='text-green'>Active</p>
            <Switch value={value} onChange={onChange} />
            <p className='text-red'>Inactive</p>
        </Space>
    );
};

const App = () => {
    return (
        <Form labelWrap wrapperCol={{ span: 24 }}>
            <Row gutter={100}>
                <Col span={12}>
                    {/* Solution 1 */}
                    <Item labelCol={{ span: 7 }} label='Status'>
                        <Space>
                            <p className='text-green'>Active</p>
                            <Item name='status' noStyle valuePropName='checked' required>
                                <Switch />
                            </Item>
                            <p className='text-red'>Inactive</p>
                        </Space>
                    </Item>

                    {/* Solution 2 */}
                    <Item labelCol={{ span: 7 }} label='Status' name='status' valuePropName='checked' required>
                        <CustomSwitch />
                    </Item>
                </Col>
            </Row>
        </Form>
    );
};

export default App;

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs 完成时未收到Antd表单值

1条答案

相关问题

热门标签

最新问答