Checkboxen funktionieren nicht in react js

Question

Meine Kontrollkästchen werden nicht überprüft, wenn sie dynamisch erstellt werden. Ich kann das Problem nicht finden. Wenn ich jedoch die Werte für check box id und label for hartcodiere, funktioniert es einfach.

var category_list = this.props.categories_list.map(function(name, i) { 
     // debugger 
     return (
      <div className="group-chkbx list-group-item"> 
       <input key={i+11} type="checkbox" id={name.category_id} name="category" /> 
       <label htmlFor={name.category_id}>{name.name}</label> 
      </div> 
     ) 
    }); 

Answer 1

Es gibt nichts, was die checked Stützen auf sich sowieso gesetzt würde. Wann sollten sie überprüft werden?

(Denken Sie auch daran, dass die Komponenten in Arrays (wie was .map Returns) should have unique key props.)

Answer 2

Die geprüfte Eigenschaft des Eingangs wird gesteuert, ob es überprüft wird. Normalerweise verwende ich den lokalen Status (oder etwas aus dem globalen Redux-Status, um zu kontrollieren, was überprüft wird). Kleines Beispiel:

class Something extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      checked: 0 
     } 

     this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e) { 
     // Do Stuff 
    } 

    render() { 
     return (
      <div> 
       { 
        this.props.categories_list.map(function(name, i) { 
         return (
          <div className="group-chkbx list-group-item" key={i}> 
           <input checked={i === this.state.checked} onChange={this.handleChange} type="checkbox" id={name.category_id} name="category" /> 
           <label htmlFor={name.category_id}>{name.name}</label> 
          </div> 
         ) 
        }); 
       } 
      </div> 
     ); 
    } 
} 

Answer 3

Wenn Ihr Kontrollkästchen nicht geprüft bekommen, höchstwahrscheinlich ist, dass einige andere Funktionen wird verhindert.
Hier und Beispiel dafür, wie die Checkbox Werte zu erhalten:

class WithChecks extends Component { 
    constructor(props){ 
     super(props); 
     this.getValue = this.getValue.bind(this); 
    } 
    getValue(e){ 
     const chk = e.target; 
     console.log(chk.checked); 
     console.log(chk.value); 
    } 

    render() { 
     const arr = ['a', 'b', 'c', 'd']; 
     return (
      <div> 
       { 
        arr.map((value, index) => { 
         return (
          <div key={index}> 
           <input type="checkbox" 
             id={'chk' + index} 
             onChange={this.getValue} 
             name="category" 
             value={value} /> 
           <label htmlFor={'chk' + index}>{value}</label> 
          </div> 
         ); 
        }) 
       } 
      </div> 
     ); 
    } 
} 

kann dies vielleicht klären helfen.

Answer 4

Nach vieler Forschung einen meiner Kollegen haben mir geholfen, mit einer Lösung aus. Die htmlFor und id müssen gleich sein, but cannot be only numeric. Die IDs, die ich verwende, sind rein numerisch. Als ich Alphabet als Präfix hinzufügte, fing es gerade an, wie Charme zu arbeiten. Danke an alle, die Interesse gezeigt und hier geholfen haben.