Question

我正在为React创建一个Dropdown组件。在下拉列表中，我有一种无线电组按钮。

<DropdownButton />
  <DropdownForm />

在DropdownButton中，我有一个状态可以知道它是否打开。取决于它，DropdownForm隐藏与否（使用display：none）。

用例是：用户选择一个单选按钮，单击“应用”并发生一些事情。但是，如果用户选择了一些单选按钮，并将鼠标移出下拉列表（不单击“应用”按钮），则选择的那个应该是我从商店获得的那个。

类似的东西：

render: function () {
  ...

  if(store.getSomeParam() != this.state.someParam && !this.props.isOpen){
    someParam = store.getSomeParam()
  }

然后单选按钮就像：

<input checked={someParam == "something"} ... />

它确实不起作用。它重新渲染但不会更改选中的按钮。我也试过refs：

this.refs.myInput.getDOMNode().checked = true

但仍然没有。这是正确的行为吗？

到目前为止我找到的唯一解决方案是不使用css隐藏类（display：none）。所以我做的是DropdownButton渲染DropdownForm取决于它是否打开（所以如果你关闭它，你迫使DropdownForm卸载）。然后再次打开时，它将从商店（getInitialState）获取值，并显示选中的正确单选按钮。但是，我不确定这是否是最好的解决方案，如果卸载组件有任何缺点，而不是只是css隐藏它。

Answer 1

TL; DR：您必须使用componentDidMount生命周期方法，而不是渲染，才能直接使用渲染的dom节点。

我也在努力解决这个问题，经过一些在线研究后，我想我也可以为自己调查一下。这就是我想出的：

使用componentDidMount生命周期方法并更新您需要的内容。这是我用来制作原型的笔，我认为看起来没问题：http://codepen.io/gholts/pen/GpWzdb

你可以通过在你的对象上放一个componentDidMount方法并在那里进行操作，很容易地将它放到你的工作中。我使用了document.getElementById但你绝对可以使用jQuery或其他你想要的东西，因为一旦组件安装它就可以用于DOM选择器。

我现在正在使用它来更新20个单选按钮组（因此它必须检查三个不同状态的道具并相应地更新）并立即加载。

希望它有所帮助！我在笔中使用了ES6类语法，如果你有时间重构，你应该检查一下:)这很有趣。

编辑：所以我明白了，我是个假人。您不需要执行我正在执行的整个document.getElementById业务。只需使用您的this.refs.whichever.getDOMNode().checked = true即可，只要您在componentDidMount中执行此操作即可。它在那里工作，因为那时页面上有一个实际的DOM元素。

Answer 2

这可能与React完全无关。

大多数浏览器都不会验证checked属性的值，而只是验证它是否存在：http://jsfiddle.net/7jzm7gvw/

只需将checked属性设置为true或null：

<input checked={someParam == "something" ? true: null} ... />

反射渲染，以编程方式更改单选按钮

2 个答案: