web-dev-qa-db-ja.com

HTML + React：最初に「チェック済み」として設定されたものにラジオボタンが付いたままになる

2つのラジオボタンのセットがあり、そのうちの1つはページが読み込まれたときにチェックされます。二枚目に変更できないようです。 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>
javascripthtmlradio-buttonreactjs
13
Alexander Suraphel

これは、各入力の値がサーバー側から設定されるため、Reactがinputsで制御されるコンポーネントを作成していたためです。

引用 ブランドンの答え ：

_value={whatever}_プロパティを入力に追加すると、制御されたコンポーネントになりますthenこれは、onChangeの値を更新するwhateverハンドラーを追加することで読み取り専用になります。 the React docs から：

なぜ制御されたコンポーネントですか？

Reactで_<input>_などのフォームコンポーネントを使用すると、従来のフォームHTMLを作成する場合には存在しない課題が発生します。たとえば、HTMLの場合：

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

これにより、入力__初期化済みがUntitledという値でレンダリングされます。ユーザーが入力を更新すると、ノードの値propertyが変更されます。ただし、node.getAttribute('value')は、初期化時に使用された値Untitledを返します。

HTMLとは異なり、Reactコンポーネントは、初期化時だけでなく、いつでもビューの状態を表す必要があります。たとえば、Reactの場合：

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

このメソッドは任意の時点のビューを記述するため、テキスト入力の値はalwaysはUntitledである必要があります。

私が見つけた最も簡単な解決策は、onChange={function(){}}をinputsに追加することです。

4
Alexander Suraphel

updateこれを行う「反応方法」は、必要な入力にdefaultChecked={true}を追加することです。その他の方法を以下に示します。

私は実際に同じ状況に直面しました。私がしたことは、親Reactコンポーネントの inputライフサイクルメソッド でcomponentDidMountタグを見つけて、checked属性を設定することでした。

バニラ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);
...
17
skip405

以前は似たような問題がありました。

defaultChecked propを最初のレンダリングに（そしてそのためだけに）使用し、値の変更を処理するonChange関数を与えます。

ここで、さまざまなinputタイプの非常に良い例を見つけました： http://bl.ocks.org/insin/raw/082c0d88f6290a0ea4c7/

5
dearrrfish

次のようにdefaultCheckedを使用します。

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