在React中设置一个复选框“ check”属性

最新推荐文章于 2024-03-15 15:25:36 发布

lvhy踩坑之路

最新推荐文章于 2024-03-15 15:25:36 发布

阅读量3.8k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44722978/article/details/116196543

版权

reactjs

我在React和复选框方面遇到了一个非常烦人的问题。我正在使用的应用程序需要复选框列表，这些复选框代表保留在后端的设置。
有一个选项可以将设置恢复为原始状态。

首先，我创建了一个组件，该组件具有一个类似于设置映射的对象。每个设置都有一个键和一个布尔值。因此：

{
    bubbles: true,
    gregory: false
}

被表示为：

<input type="checkbox" value="bubbles" checked="checked" />
<input type="checkbox" value="gregory" />

现在，React似乎对复选框应该如何工作一无所知。我不想设置复选框的值，我想使用“ checked”属性。

但是，如果我尝试这样的事情：

<input
    type="checkbox"
    value={setting}
    checked={this.settings[setting]}
    onChange={this.onChangeAction.bind(this)}
/>

我收到此警告：

警告：AwesomeComponent正在更改要控制的复选框类型的不受控制的输入。输入元素不应从不受控制切换为受控制（反之亦然）。确定在组件的使用寿命期间使用受控或不受控制的输入元素。更多信息：[
一些无用的文档页面，我读了几次都无济于事 ]

所以我决定创建另一个组件来包装每个单独的复选框，然后我得到了：

<input
    type="checkbox"
    checked={this.state.checked}
    onChange={this.onChangeAction.bind(this)}
/>

现在，checked该属性直接存在于我的状态中。

这会产生相同的警告，因此我尝试使用defaultChecked：

<input
    type="checkbox"
    defaultChecked={this.state.checked}
    onChange={this.onChangeAction.bind(this)}
/>

这使警告消失，但是现在它无法将checked值重置为默认值。因此，我尝试使用该方法componentWillReceiveProps，通过这种方式，我可以确定我的状态是正确的，this.state.checked正确的并且该组件再次呈现。

确实如此。但是该复选框保持原始状态。现在我离开了那个丑陋的警告，我正在使用checked。我该如何解决这个问题，以便消除警告？

关注