如果在表单提交后Antd 4复选框没有值,可能是由于没有正确设置复选框的value属性或者没有正确处理表单提交的数据。以下是一种可能的解决方法:
import React, { useState } from 'react';
import { Checkbox, Form, Button } from 'antd';
const App = () => {
const [form] = Form.useForm();
const [checkedValues, setCheckedValues] = useState([]);
const handleFormSubmit = (values) => {
console.log('Form values:', values); // 此处打印表单提交的值
// 处理复选框的值
const checkedValues = [];
values.checkboxGroup.forEach((isChecked, index) => {
if (isChecked) {
checkedValues.push(index);
}
});
console.log('Checked values:', checkedValues); // 此处打印复选框的值
// 提交表单的逻辑...
};
return (
setCheckedValues(values)}>
Option 1
Option 2
Option 3
);
}
export default App;
在这个示例中,我们使用了Form
组件来处理表单的提交。通过Form.Item
和name
属性,我们将复选框的值与表单绑定起来。在handleFormSubmit
函数中,我们可以通过values
参数获取到表单提交的值。然后我们遍历checkboxGroup
的值,将选中的复选框的索引作为值存储在checkedValues
数组中。
这样,在表单提交后,你可以在handleFormSubmit
函数中通过values
获取到所有表单的值,通过checkedValues
获取到复选框的值。你可以根据自己的需求处理和使用这些值。