React input输入框defaultvalue/value值不生效，表单set默认值不生效

最新推荐文章于 2024-05-08 15:18:34 发布

原创最新推荐文章于 2024-05-08 15:18:34 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

在React应用中，当设置表单初始值时，发现useState的defaultValue不起作用。正确的做法是利用form.setFieldsValue来设定表单输入框的默认值。在编辑状态下，通过条件判断来决定是否禁用输入框，并设置相应的默认值。

`value={0}//value='0'不生效`

  const [disableds, setDisableds] = useState(false) //编辑状态
   <Form.Item
                name="field1"
                label="ERP是否存在:"
                rules={[
                  {
                    required: true,
                    message: '请输入',}
                    ,
                ]}
              >
                <Radio.Group buttonStyle="solid">
                  <Radio value={'0'}>是</Radio>
                  <Radio value={'1'}>否</Radio>

input输入框直接set默认值不生效

const [defaultValue, setdefaultValue] = useState('') //默认值
 useEffect(() => {
    if(!initialValue.id){
    setdefaultValue(10)
    }
       }, [visible])
//输入框数据
<Col span={12}>
              <Form.Item
                name="residualLimit"
                label="剩余额度"
                rules={[
                  {
                   required: true,
                    message: '请输入',
                  },
                ]}
              >
                <Input placeholder="请输入" defaultValue={defaultValue} allowClear disabled={!disableds} />
                   </Form.Item>
            </Col>}
此时set进去的默认值是不生效的，应该用以下方法进行赋予默认值

`更改方法，直接使用` form.setFieldsValue对表单输入框进行赋值

  useEffect(() => {
    if(!initialValue.id){
      form.setFieldsValue({
        residualLimit:'0';
          setDisableds(true)
      })
    }else{
     setDisableds(true)
     }
       }, [visible])
       
    <Col span={12}>
              <Form.Item
                name="residualLimit"
                label="剩余额度"
                rules={[
                  {
                   required: true,
                    message: '请输入',
                  },
                ]}
              >
                <Input placeholder="请输入" defaultValue={residualLimit} allowClear disabled={!disableds} />
                   </Form.Item>
            </Col>}