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

我为React创建了一个Dropdown组件。在下拉列表中，我有一种无线电组按钮。React渲染，以编程方式更改单选按钮

<DropdownButton /> 
    <DropdownForm />

在DropdownButton中，我有一个状态来判断它是否打开。取决于此，DropdownForm它隐藏或不（使用display：none）。

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

喜欢的东西：

render: function() { 
    ... 

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

然后单选按钮，如：

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

它并没有真正的工作。它重新渲染，但它不会更改检查的按钮。我也试过参考：

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

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

到目前为止我发现的唯一解决方案是不使用CSS隐藏类（display：none）。因此，我所做的是DropdownButton根据它是否打开呈现DropdownForm（因此，如果关闭它，则强制DropdownForm卸载）。然后再次打开时，它将从商店获取值（getInitialState），并显示选定的正确单选按钮。但是，我不确定这是否是最好的解决方案，以及卸载组件时是否有任何缺点，而不仅仅是隐藏它。

来源

2014-10-20 Ferran Negre

这可能与React无关。

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

的checked属性只设置为true或null：

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

来源

2014-10-20 19:32:31

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元素。

来源

2015-10-04 20:38:57 Menello

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

回答

相关问题