defaultChecked/checked 属性的 BlueprintJS RadioGroup/Radio 问题

Question

我正在尝试设置一个 RadioGroup 组件，该组件的 Radio 组件最初选中了 'Data' 标签。但是当我使用以下代码时：

<RadioGroup
  onChange={(e) => {
    this.store.setDataFilterSelection(e.target.value)
  }}
  >
  <Radio label='Data'
    defaultChecked
    value='1'
    className='radio-selectors' />
  <Radio label='Description'
    value='2'
    className='radio-selectors' />
  <Radio label='Data Source'
    value='3'
    className='radio-selectors' />
</RadioGroup>

我在控制台中收到以下警告。

Blueprint.Radio contains an input of type radio with both checked and defaultChecked props. Input elements must be either controlled or uncontrolled (specify either the checked prop, or the defaultChecked prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: react-controlled-components

我已经尝试了几个变体，但似乎无法正确完成，基本上我希望能够监视单选按钮的变化，但我无法将它们绑定到状态，因为它们'此处的示例已完成：http://blueprintjs.com/docs/#components.forms.radio

Answer 1

defaultChecked 仅在不受控制的使用中受支持（这是 React 的核心概念，而不是蓝图的东西），而 checked 仅在受控制的使用中受支持——这就是 React 错误在告诉你。

但如果您使用 RadioGroup，则所有 Radio 子级都将被迫进入受控模式，并且所有状态都应经过 RadioGroup。然而 RadioGroup 目前不支持 defaultValue 道具所以这实际上是不可能的。我认为这是蓝图中的错误，太好了！

请 file an issue 在 repo 上，我们将研究实现它（或者更好的是，提交带有修复的 PR！）

Answer 2

我遇到了同样的错误，我使用了 useState 并在声明状态时设置了我们想要的默认值

const [radio, setRadio] = useState('defaultValue');.

由于我们不能使用defaultChecked，所以我使用上面的方法来获取默认选中的选项。

defaultChecked/checked 属性的 BlueprintJS RadioGroup/Radio 问题

BlueprintJS RadioGroup/Radio issue with defaultChecked/checked prop

blueprintjs