ラベルがクリックされたときのラジオ入力の変化のみ

Question

ラジオ入力のための制御されたコンポーネントを作成しました。
ラベルをクリックしない限り、ラジオボタンはチェックされません。

実際のバックエンド状態の値が変更され、 'checked'属性に使用しているロジックが起動していますが、正しくレンダリングしたくありません。

（この例では、私は私が私の目的のために作成したカスタムフィールドオブジェクトを使用しています。）

function RadioInput (props) { 

    return (
     <input 
      type='radio' 
      name={props.field.name} 
      disabled={props.field.disabled} 
      onChange={ (evt) => {console.log('fire onChange'); props.field.onChange(props.choice) } } 
      onFocus={ (evt) => props.field.onFocus(evt) } 
      onBlur={ (evt) => props.field.onBlur(evt) } 
      style={errStyle} 

      id={props.field.name + '-' + props.choice} 
      value={props.choice} 
      checked={(console.log('fire checked', props.field.name, props.choice, props.field.value, props.choice === props.field.value)) || (props.choice === props.field.value) } 
     /> 
    ) 
} 

私は、実際のラジオボタンをクリックしたときに、私がチェックから発射ログ出力を見ることができますし、すべての値が正しい。それはちょうど適切にレンダリングしたくありません。

この入力用のラベルをクリックすると、同じコンソール出力が生成されますが、無線チェック状態が正しく表示されます。

私は間違っていますか？

更新： ラベルの機能がありません。ただhtmlFor

<label htmlFor={"radio button name"}>LABEL TEXT</> 

アップデート2でまっすぐなラベルを使用して： は、ここでは、この作品実証codepenです。 http://codepen.io/anon/pen/pegxyr?editors=0010

私は

Update3とこれを理解するために私のコードを再検討することになります： を私はあきらめ、ちょうどカスタムCSS]ラジオボタンを作りました。これは、私が通常期待しているような形でタブすることができないので、理想よりもはるかに少ないです。超イライラ。

Answer 1

これはうまくいかない理由はありません。問題はonChange関数にある可能性があります。これは変更されません。または、Inputコンポーネントに渡す値に問題がある可能性があります。

私はあなたのための作業例を作成しました：http://codepen.io/DeividasK/pen/bqEmGp

たぶん私はあなたが正常にコンポーネントを更新することができます何をやったか照合することによって。