"checked"属性のReact Radio Buttonイベント

Question

React.jsのラジオボタンの「checked」属性に基づいてイベントを処理しようとしています。ボタンに複数の値を選択させたいので、複数の選択ができないように見える 'name'属性を削除しました。

ベースのラジオボタンコンポーネントは、I値をそれが必要配列で見つかった場合、ラジオボタンのbtn_valueに対応する値のアレイを有するform_data OBJECを有する

export function Radio_Button_Multiple_Selection (props) { 
    return (
    <label> 
     <input type="radio" 
       checked={props.form_data[props.field_name].indexOf(props.btn_value) > -1} 
       onClick={props.radio_effect} /> 
     {props.btn_value} 
    </label> 
) 
} 

ように見えますチェックされているようにしてください。 （予想通りそしてこの部分は今正常に動作している、彼らは実際にショーアップでチェックします）：

今

const form_data = { 
... 
    occupations: ['student', 'merchant', 'paladin', 'troll'], 
... 
} 

、私はまたに応答して、職業の配列の値を操作するためのメソッドを持つクラスを反応させてきましたラジオボタンが既に確認されたりされなかったなめされているかどうか：私はCONSOLE.LOGとき

がRadioButtonコンポーネントのchecked属性内のブール値を返すロジックを「確認」：

handleRadioButton (event) { 
    const target = event.target; 
    const value = target.value; 
    const isChecked = target.checked; 
    console.log(isChecked) // this undefined. why?!? 
    if (isChecked) { 
    // remove it from array 
    // etc. 
    } else { 
    // add it to array 
    // etc. 
    } 
} 

私の主な問題は、次のことです、それは期待通りに現れます（配列内にisまたはisntの場合はfalse）。しかし、ボタンを扱うためのクラスメソッドでは、常にchecked = undefinedとなります。

Answer 1

HTMLのラジオボタンをオフにすることはできません。

さらに、あなたの状態は、e.target.checked &の状態ではなく、あなたの状態だけに依存するべきです。

class Radio extends Component { 
    state = {} 

    render() { 
    return <input 
     type="radio" 
     checked={this.state.checked} 
     onClick={e => this.setState({ 
     checked: !this.state.checked 
     })} 
    /> 
    } 
} 

<input type="radio" />

Answer 2

私は回避策が見つかりました：

は、私は配列で、「確認」属性の下に保管していたのと同じ情報を格納する「の値」属性を使用しますそれはボタンの値とチェックされた論理ブール値を持ちます。たとえば、値= [ブール値、btn_値]

イベントハンドラの 'value'属性にアクセスします。値は完全な文字列として到着するので、コンマで区切り、そこで作業します。

ハッキーですが、うまくいきました。