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渲染，以編程方式更改單選按鈕

回答

相關問題