Wie zu multi überprüft natives Element reagieren?

Question

Ich bin Neuling mit React Native, ich bin eine Quiz-Anwendung mit Multi-Choice-Option, ich benutze "react-native-Elemente", um das Kontrollkästchen zu generieren. aber ich weiß nicht, wie man Multi-Checked kontrolliert. Ich habe Suche und gefundene Lösung auf How to render multi components and set individual status in react-native?.

aber ich verstehe immer noch nicht Wenn Michael Peyer Lösung verwendet, welchen Zustand sollte ich auf der Konstruktorfunktion definieren, um diese Lösung anzupassen?

constructor(props) { 
    super(props); 
    this.state = ??; 
    } 

Bitte helfen Sie mir, danke.

Answer 1

Versuchen Sie, diese Prüfung:

import { CheckBox } from 'react-native' 

class QuizScreen extends Component { 
    constructor(props) { 
    super(props) 
    // this is the default state on page load 
    this.state = { 
     checkbox1: false, 
     checkbox2: false, 
     checkbox3: false, 
    } 
    } 

    render() { 
    return (
     <View> ... etc 
     <CheckBox 
      value={this.state.checkbox1} 
      onChange={() => this.setState({ checkbox1: !this.state.checkbox1 })} 
     /> 

     <CheckBox 
      value={this.state.checkbox2} 
      onChange={() => this.setState({ checkbox2: !this.state.checkbox2 })} 
     /> 

     <CheckBox 
      value={this.state.checkbox3} 
      onChange={() => this.setState({ checkbox3: !this.state.checkbox3 })} 
     /> 
     <View> 
    ) 
    } 
} 

Was ist los?

1. der Standardzustand wird im Konstruktor gesetzt
2. der Wert this.state.checkbox1 ist der aktuelle Wert
3. this.setState({ prop: 'value' }) auf Requisiten aus Ihrem Konstruktor verweist
4. this.setState({ checkbox1: !this.state.checkbox1 }) setzt den Wert auf das Gegenteil von dem, was es zur Zeit auf

das Problem in der Frage ist es, Ihnen verbunden, dass die Person hatte:

this.state = { checked: false } 

aber er/sie hat mehrere Kontrollkästchen, so dass sie alle die gleiche Eigenschaft auf dem Statusobjekt bearbeiten.

Beachten Sie, wie mein Beispiel 3 Eigenschaften für das Statusobjekt hat. Die andere Antwort von zvona hier ist sehr illustrativ für die Handhabung von mehreren.

Answer 2

Dies folgt den Grundprinzipien von RN und Umgang mit einem Array innerhalb des Staates. Was ich überprüfte die react-native-Elemente Dokumente, sollte es so wie es ist. Es kann zwar noch Raum für Verbesserungen geben, aber beginnen Sie damit:

constructor(props) { 
    super(props); 

    this.state = { 
    checkboxes: [{ 
     id: 1, 
     title: 'one', 
     checked: false, 
    }, { 
     id: 2, 
     title: 'two', 
     checked: false, 
    }], 
    }; 
} 

... 

toggleCheckbox(id) { 
    const changedCheckbox = this.state.checkboxes.find((cb) => cb.id === id); 

    changedCheckbox.checked = !changedChecbox.checked; 

    const checkboxes = Object.assign({}, this.state.checkboxes, changedCheckbox); 

    this.setState({ checkboxes }); 
} 

... 

render() 
    return (
    this.state.checkboxes.map((cb) => { 
     return (
     <Checkbox 
      key={cb.id} 
      title={cb.title} 
      checked={cb.checked} 
      onPress={() => this.toggleCheckbox(cb.id)} /> 
    ) 
    }) 
)