antd中被设置了 name
属性的 Form.Item
包装的控件,表单控件会自动添加 value
(或 valuePropName
指定的其他属性) onChange
(或 trigger
指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
-
你不再需要也不应该用
onChange
来做数据收集同步(你可以使用 Form 的onValuesChange
),但还是可以继续监听onChange
事件。 -
你不能用控件的
value
或defaultValue
等属性来设置表单域的值,默认值可以用 Form 里的initialValues
来设置。注意initialValues
不能被setState
动态更新,你需要用setFieldsValue
来更新。 -
你不应该用
setState
,可以使用form.setFieldsValue
来动态改变表单值。12345678onValuesChange = (propFormItem, allFormItem) =>{
if
(
"status"
in
propFormItem && !propFormItem.status && allFormItem.staus1) {
const
formInstance =
this
.refs.form;
formInstance.setFieldsValue({
status:
false
,
})
}
}
-
12345678910111213141516171819202122232425262728293031323334353637383940
<Form
ref
=
"form"
initialValues={{
status,
status1,
}}
onValuesChange={
this
.onValuesChange}
onFinish={
this
.onFinish}
>
<FormItem
label=
'是否拥有'
name=
"status"
valuePropName=
'checked'
>
<Switch checkedChildren=
"是"
unCheckedChildren=
"否"
onChange={(value) => {
this
.setState({status: value})}} />
</FormItem>
<FormItem
label=
'关联是否拥有'
name=
"status1"
valuePropName=
'checked'
>
<Switch
checkedChildren=
"是"
unCheckedChildren=
"否"
disabled={!
this
.state.status}
/>
</FormItem>
<FormItem
{...submitFormLayout}
style={{
marginTop: 32,
}}
>
<Button type=
"primary"
htmlType=
"submit"
loading={submitting}>
保存
</Button>
</FormItem>
</Form>
分类:
react
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗