HTML + React：單選按鈕卡在最初設置為“已選中”的按鈕上

Question

我有一組兩個單選按鈕，其中一個在加載頁面時被檢查。 看來我無法將其改為第二個。 如果重要的話，HTML由reactjs構建。 chrome上的標記看起來像：

<fieldset data-reactid=".0.0.0.0.0.0.1">
<label for="coop-radio-btn" data-reactid=".0.0.0.0.0.0.1.0">
    <span data-reactid=".0.0.0.0.0.0.1.0.0">To a Cooperative</span>
    <input type="radio" name="requestOnBehalfOf" value="coop" id="coop-radio-btn" data-reactid=".0.0.0.0.0.0.1.0.1">
</label>
<label for="union-radio-btn" data-reactid=".0.0.0.0.0.0.1.1">
    <span data-reactid=".0.0.0.0.0.0.1.1.0">Additional Request</span>
    <input type="radio" name="requestOnBehalfOf" value="union" checked="" id="union-radio-btn" data-reactid=".0.0.0.0.0.0.1.1.1">
</label>
</fieldset>

Answer 1

更新 “做出反應的方式”是將defaultChecked={true}到所需的輸入。 其他方式如下。

我實際上遇到了同樣的情況。 我所做的是在父React組件的componentDidMount生命周期方法中找到input標記，然后設置checked屬性。

如果我們談論vanilla JS，您可以使用querySelector找到第一個無線電輸入。 像這樣：

var Form = React.createClass({
    componentDidMount: function(){
        this.getDOMNode().querySelector('[type="radio"]').checked = "checked";
    },
    render: function(){
        //your render here
    }
});

如果你使用jQuery，這可以這樣做：

...
    $(this.getDOMNode()).find('[type="radio"]').eq(0).prop("checked", true);
...

Answer 2

我曾經有類似的問題。

使用defaultChecked prop（僅用於）首次渲染，並提供onChange函數來處理值更改。

我在這里找到了一個非常好的不同input類型示例： http ： //bl.ocks.org/insin/raw/082c0d88f6290a0ea4c7/

Answer 3

原因是React正在制作input受控組件，因為每個輸入的值都是從服務器端設置的。

引用布蘭登的回答 ：

如果你向輸入添加一個value={whatever}屬性，這使它成為一個受控組件， 那么它是只讀的，你可以添加一個更新whatever值的onChange處理程序。 來自React文檔 ：

為何選擇受控組件？

在React中使用諸如<input>類的表單組件提出了在編寫傳統表單HTML時不存在的挑戰。 例如，在HTML中：

 <input type="text" name="title" value="Untitled" /> 

這將使用Untitled值初始化輸入。 當用戶更新輸入時，節點的value 屬性將更改。 但是， node.getAttribute('value')仍將返回初始化時使用的值Untitled 。

與HTML不同，React組件必須在任何時間點表示視圖的狀態，而不僅僅是在初始化時。 例如，在React中：

 render: function() { return <input type="text" name="title" value="Untitled" />; } 

由於此方法在任何時間點描述視圖，因此文本輸入的值應始終為Untitled 。

我找到的最簡單的解決方案是將onChange={function(){}}到input s。

Answer 4

像這樣使用defaultChecked ：

<input type="radio" name="temperature" value="hot" defaultChecked={true}/> Hot
<input type="radio" name="temperature" value="warm" /> Warm