2017-06-15 10 views
0

Ich möchte die ausgewählten Kontrollkästchen Elemente anzuzeigen. Für die Verwendung von Material-Ui checkbox, so im Moment kann ich nur die Elemente mit Kontrollkästchen anzeigen, aber nicht in der Lage, die ausgewählten Elemente anzuzeigen. Ich weiß, es ist einfach, aber ich bin neu zu reagieren und redux, so dass es schwierig zu starten. Ich hoffe auf Hilfe. Danke.mit Material-Ui Kontrollkästchen mit den reactjs und redux

this.state = { 
      data: [apple, kiwi, banana, lime, orange, grape], 
     }} 
    handleCheck(x) { 
     this.state.checkedValues.push(x); 
    } 
render(){ 
     {this.state.data.map((x) => 
      <Checkbox 
       label={x} key={x.toString()} 
       onCheck={() => this.handleCheck(x)} 
       checked=true 
       }/> 
     )}} 

Antwort

0

In der handleCheck Funktion, versuchen Sie Ihre Komponente Zustand falsch zu aktualisieren. Sie müssen setState verwenden, um Statusänderungen vorzunehmen. In Ihrem Beispiel wird der Status nicht aktualisiert, so dass Sie wahrscheinlich nichts auswählen können. Auch würde helfen, Ihr Beispiel ein wenig aufzuräumen:

class CheckboxList extends React.Component{ 
    constructor() { 
    super(); 
    this.state = { 
     data: ['apple', 'kiwi', 'banana', 'lime', 'orange', 'grape'], 
     checkedValues: [] 
    } 
    } 
    handleCheck(index) { 
    this.setState({ 
     checkedValues: this.state.checkedValues.concat([index]) 
    }); 
    console.log(this.state.checkedValues.concat([index])) 
    } 
    render(){ 
    const checks = this.state.data.map((item, index) => { 
     return (
     <span key={item}> 
      <input type="checkbox" 
      value={item} 
      onChange={this.handleCheck.bind(this, index)} //Use .bind to pass params to functions 
      checked={this.state.checkedValues.some(selected_index => index === selected_index)} 
      /> 
      <label>{item}</label> 
     </span>) 
    }); 
    return <div>{checks}</div> 
    } 
} 

Update: Added arbeitet jsfiddle.

+0

Er wird nicht in der Lage sein, Kontrollkästchen zu deaktivieren, nur neue überprüfen – BravoZulu

+0

Ja, ich gab Art zu versuchen, bis herauszufinden, was sie auf der Grundlage ihres Beispiel vorhatten. Hoffentlich reicht das, um sie in die richtige Richtung zu lenken. –

+0

Warum sind alle Kontrollkästchen markiert? – devanya

1

In React sollten Sie Daten nicht direkt in Ihren Status pushen. Verwenden Sie stattdessen die setState-Funktion.

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     data: [apple, kiwi, banana, lime, orange, grape], 
     checkedValues: [] 
    } 
    } 
    handleCheck(x) { 
    this.setState(state => ({ 
     checkedValues: state.checkedValues.includes(x) 
     ? state.checkedValues.filter(c => c !== x) 
     : [...state.checkedValues, x] 
    })); 
    } 

    render() { 
    return (<div> 
    { this.state.data.map(x => 
     <Checkbox 
      label={x} key={x.toString()} 
      onCheck={() => this.handleCheck(x)} 
      checked={this.state.checkedValues.includes(x)} 
     /> 
    )}} 
    </div>) 
    } 
} 
+0

Ich bekomme eine Menge Fehler – devanya

+0

Sie nicht Sie müssen den Status jedes Mal kopieren, wenn Sie 'setState' ausführen. Sie dürfen nur ein Stück des Zustands gleichzeitig aktualisieren. –

+0

Welche Fehler bekommen Sie? – BravoZulu

Verwandte Themen