Reagieren Materialisieren Kontrollkästchen

Question

Disclaimer: Neu in der Entwicklung und das ist meine erste s/o Post.

Ich verwende materialize auf einem Reaktionsprojekt mit einem Filter, der Kontrollkästchen hat. Ich habe derzeit die Checkbox-Komponente als:

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> 
) 

Es rendert mit der Checkbox und die Beschriftung daneben. Allerdings, wenn ich den Input-Tag zu entfernen, die wie so außerhalb des Label-Tages ist:

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> 
) 

das Kontrollkästchen verschwindet aber der Text noch anklickbar ist. Die Komponente ist klassenbasiert, so dass ihr Status beibehalten oder aufgehoben wird.

Irgendwelche Ideen, warum es so verhält?

Answer 1

Problem behoben! Es stellte sich heraus, dass ich eine ID in meinem Eingabefeld, das übereinstimmte, und htmlFor für die Eigenschaft in meinem Beschriftungsfeld benötigte. Siehe unten stehenden Code für das Update:

<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>