美文网首页
react+antd 踩坑日记

react+antd 踩坑日记

作者: 骚骚乐 | 来源:发表于2021-01-11 17:12 被阅读0次

Switch 无法动态修改defaultChecked的属性值的办法

  1. 设置初始值为变量
  2. 在 Form.Item 标签上添加属性 valuepropname={初始值} & key={初始值}
     const [statusChecked, setStatusChecked] = useState(false); 
        <FormItem
          name='status' label='状态'
          valuePropName={`${statusChecked}`}
          key={`${statusChecked}`}>
          <Switch defaultChecked={statusChecked}
                  checkedChildren='启用'
                  unCheckedChildren='禁用'
                  onChange={(checked) => {
                    if (checked) {
                      form.setFieldsValue({
                        status: 'E',
                      });
                    } else {
                      form.setFieldsValue({
                        status: 'D',
                      });
                    }
                  }} />
        </FormItem>

initialValue 输入框默认值

<FormItem initialValue={'18'} name='type' label='age'>
          <Input placeholder='请输入年龄' />
</FormItem>

被设置了 name 属性的 Form.Item 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:

  1. 你不再需要也不应该用 onChange 来做数据收集同步(你可以使用 Form 的 onValuesChange),但还是可以继续监听 onChange 事件。

  2. 你不能用控件的 value 或 defaultValue 等属性来设置表单域的值,默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新。

  3. 你不应该用 setState,可以使用 form.setFieldsValue来动态改变表单值。

相关文章

网友评论

      本文标题:react+antd 踩坑日记

      本文链接:https://www.haomeiwen.com/subject/hetooktx.html