reactjs 满足条件时按钮不显示

vbopmzt1  于 2023-03-17  发布在  React
关注(0)|答案(1)|浏览(183)

我有一个名为formData的对象,它与useState()一起使用。
每当表单中的字段发生更改时,formData就会按如下方式更新:
setFormData({...formData, [field.id]: field.value})
我希望表单底部的按钮在所有必填字段都填好后发生变化,这意味着formData中的所有值都不为空(默认情况下,当对象初始化时,所有值都为空)。

{ (Object.values(formData).filter(value => value !== null) == true) ? (
    <Button
        Size='w-full'
        Caption='Submit & Continue'
        AdditionalClasses='block text-center'
        Type={'primary'}
    />
) : (
    <Button
        Size='w-full'
        Caption='Please fill in the above form to continue'
        AdditionalClasses='block justify-center'
        Disabled={0}
        OnClick={test}
        Type={'disabled'}
    />
)}

但是,即使条件已满足且值不为空,按钮也不会更改。

p8h8hvxi

p8h8hvxi1#

由于Object.values返回一个数组,因此该函数将始终返回true

Object.values(formData).filter(value => value !== null) == true

考虑采取以下措施:

Object.values(formData).filter(value => value !== null).length

相关问题