React Materializeチェックボックス

Question

免責事項：初めての開発です。これは初めての投稿です。

私は、反応プロジェクトでチェックボックスを持つフィルタを使ってmaterializeを使用しています。それは、チェックボックスとその横にラベルをレンダリング

return (
    <div className={this.props.type} > 
     <form> 
     <input 
       type={this.props.type} 
       value={label} 
       checked={isChecked} 
       onChange={(e) => this.toggleCheckboxChange(e)} 
      /> 
     <label> 
      <input 
      type={this.props.type} 
      value={label} 
      checked={isChecked} 
      onChange={(e) => this.toggleCheckboxChange(e)} 
      /> 
     {label} 
     </label> 
     </form> 
    </div> 
) 

：私は現在のように戻って、チェックボックスコンポーネントを持っています。ただし、ラベルタグの外にある入力タグを削除すると、次のようになります。

return (
    <div className={this.props.type} > 
     <form> 
     <label> 
      <input 
      type={this.props.type} 
      value={label} 
      checked={isChecked} 
      onChange={(e) => this.toggleCheckboxChange(e)} 
      /> 
     {label} 
     </label> 
     </form> 
    </div> 
) 

チェックボックスは消えますが、テキストはクリック可能です。コンポーネントはクラスベースであるため、チェック状態または未チェック状態を維持します。

このように動作する理由は何ですか？

Answer 1

問題が修正されました。私の入力フィールドに一致したIDとラベルフィールドのhtmlForプロパティが必要でした。修正のためのコードを参照してください：

<div className={this.props.type} > 
     <form> 
     <input 
      id={label[0]} 
      type={this.props.type} 
      value={label} 
      checked={isChecked} 
      onChange={(e) => this.toggleCheckboxChange(e)} 
      /> 
     <label htmlFor={label[0]}> 
     {label} 
     </label> 
     </form> 
    </div>