javascript - 如何在取消选中时删除对象的属性?

标签 javascript reactjs react-context react-final-form

我正在使用 react-final-form 并从这个例子中获得帮助 https://codesandbox.io/s/52q597j2p

在上面的示例中,当用户取消选中此字段时,giftCardMessage 属性将从对象中删除 Is this a gift?

重现步骤。

  • 选中 Is this a gift? 字段并在文本字段中输入一些内容 Message 。然后取消选中,查看属性将被删除。

我使用上面的概念并尝试做同样的事情。但在我的示例中我使用了前缀。在我的示例中,如果我取消选中复选框,它不会删除对象的属性

https://codesandbox.io/s/react-final-form-declarative-form-rules-uvz6y

<WhenFieldChanges
              field="gift"
              becomes={false}
              set="giftCardMessage"
              to={undefined}
            />
            <FieldPrefix prefix="apps.dh">
              <div>
                <label>Is this a gift?</label>
                <PrefixedField name="gift" component="input" type="checkbox" />
              </div>

              <div>
                <label>Message</label>
                <PrefixedField
                  name="giftCardMessage"
                  component="textarea"
                  placeholder="What do you want the card to say?"
                />
              </div>
            </FieldPrefix>

最佳答案

当复选框未选中时(gif 的值为 true 或 false)应自动禁用消息输入,请在此处查看 https://imgur.com/a4Eigoh 您应该在消息中添加:disabled={!values.gift} 以响应框的值

关于javascript - 如何在取消选中时删除对象的属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57737853/

相关文章:

javascript - ngrx/effect 将数据传递给运算符(operator)

javascript - 如何在 react 中获取列表上的点击事件(自动完成)?

javascript - React-router-dom NavLink 图标更新程序 "Maximum update depth exceeded."

javascript - 使用 Context API 在函数组件中未定义 React 状态属性

javascript - CSV 到 D3 : summing over values for multiple links

javascript - 刷新列表时 Hook useCallback 继续使用旧值

javascript - 当提供者组件的父状态发生变化时,为什么不能更新子组件(具有反应上下文)中的值?

reactjs - React Context 未将类更新为值

使用ajax的Javascript和php : why is the php not called?

javascript - Prop 处理程序不能一致工作?