通过单击 React Native 中的复选框更改片段答案

【问题标题】：Change Fragment by Clicking to Checkbox in React Native通过单击 React Native 中的复选框更改片段
【发布时间】：2019-10-23 14:28:17
【问题描述】：

我最近加入了 React Native 项目团队。由于时间有限，没有时间深入学习 JavaScript，所以我直接继续这个项目。我的问题是如何通过单击复选框来更改片段。因此，当我单击复选框时，它会更改为另一个片段，当我单击取消选中复选框时，它会返回到前一个片段。我找到了这个React Native - CheckBox unable to uncheck the "checked" box 但这对我来说有点难以理解。

我做了什么：

export default class App extends React.Component {
constructor(props) {
    super(props);
    //state to manage the screen visible at a time
    this.state = { val: 1 };
}
renderElement() {
    //You can add N number of Views here in if-else condition
    if (this.state.val === 1) {
        //Return the FirstScreen as a child to set in Parent View
        return <FirstScreen />;
    } else if (this.state.val === 2) {
        //Return the SecondScreen as a child to set in Parent View
        return <SecondScreen />;
    } else {
        //Return the ThirdScreen as a child to set in Parent View
        return <ThirdScreen />;
    }
}
...
<TouchableOpacity
   style={styles.button}
   onPress={() => this.setState({ val: 1 })}>
   <Text style={{ color: '#ffffff' }}>1st View</Text>
</TouchableOpacity>

<TouchableOpacity
   style={styles.button}
   onPress={() => this.setState({ val: 2 })}>
   <Text style={{ color: '#ffffff' }}>2nd View</Text>
</TouchableOpacity>
<CheckBox
          value = { this.state.check }
           onChange={() => this.setState({ val: 2 })/>

//This is where my fragment changes 
<View style={{ backgroundColor: '#ffffff' }}>
                {this.renderElement()}
</View>

目前，我可以转到第二个片段。但是我不能回到第一个片段并取消选中复选框。

【问题讨论】：

如果您已经在按下按钮时更改片段，为什么还需要该复选框？
任务是用复选框来完成它。但我是用按钮来测试的

标签： javascript react-native

【解决方案1】：

export default class App extends React.Component {
constructor(props) {
    super(props);
    //state to manage the screen visible at a time
    this.state = { val: 1, checked: false };
}

//Toggle state on checkbox change
toggleFragment() {
    if(this.state.val == 1) {
        this.setState({ val: 2, checked: !this.state.checked });
    } else {
        this.setState({ val: 1, checked: !this.state.checked});
    }
}

renderElement() {
    //You can add N number of Views here in if-else condition
    if (this.state.val === 1) {
        //Return the FirstScreen as a child to set in Parent View
        return <FirstScreen />;
    } else if (this.state.val === 2) {
        //Return the SecondScreen as a child to set in Parent View
        return <SecondScreen />;
    } else {
        //Return the ThirdScreen as a child to set in Parent View
        return <ThirdScreen />;
    }
}
...
<TouchableOpacity
   style={styles.button}
   onPress={() => this.setState({ val: 1 })}>
   <Text style={{ color: '#ffffff' }}>1st View</Text>
</TouchableOpacity>

<TouchableOpacity
   style={styles.button}
   onPress={() => this.setState({ val: 2 })}>
   <Text style={{ color: '#ffffff' }}>2nd View</Text>
</TouchableOpacity>
<CheckBox
          value = 'checked'
          checked={this.state.checked == true}
           onChange={() => this.toggleFragment()/>

//This is where my fragment changes 
<View style={{ backgroundColor: '#ffffff' }}>
                {this.renderElement()}
</View>

【讨论】：

一旦我点击了复选框，它就变成了另一个片段，但是当我第二次点击时，我无法取消选中它并返回到上一个片段。
你可以使用上面的sn -p 我已经修改了
感谢您的回复，它只解决了一半的问题。我会给出完整的答案

【解决方案2】：

export default class App extends React.Component {
constructor(props) {
    super(props);
    //state to manage the screen visible at a time
    this.state = { check: true };
}
renderElement() {
    if (this.state.check) {
        return <FirstScreen />;
    } else {
        return <SecondScreen />;
    }
}
...
<TouchableOpacity
   style={styles.button}
   onPress={() => this.setState({ val: 1 })}>
   <Text style={{ color: '#ffffff' }}>1st View</Text>
</TouchableOpacity>

<TouchableOpacity
   style={styles.button}
   onPress={() => this.setState({ val: 2 })}>
   <Text style={{ color: '#ffffff' }}>2nd View</Text>
</TouchableOpacity>
<CheckBox
          value = { this.state.check }
           onValueChange={(newValue) => this.setState({check:newValue})/>

//This is where my fragment changes 
<View style={{ backgroundColor: '#ffffff' }}>
                {this.renderElement()}
</View>

【讨论】：

给 newValue 放什么？因为它显示红线
你能推荐我从哪里开始学习 Javascript 吗？我完全明白你的意思
我已经修改了我的答案。使用 onValueChange 而不是 onChange
网上有很多资源可以学习 JavaScript，比如 udemy.com、lynda.com、pluralsight.com，它们都非常适合学习任何东西
感谢您的推荐，您的回答只解决了部分问题。我只能选中和取消选中选项。现在我将给出完整的答案。

【解决方案3】：

谢谢Raju 和Waheed Akhter。通过结合您的答案，我找到了解决方案。这是一个解决方案：

constructor(props) {
    super(props);
    //state to manage the screen visible at a time
    this.state = { val: 1, checked: true };
}
//Toggle state on checkbox change
toggleFragment() {
    if(this.state.val == 1) {
        this.setState({ val: 2});
    } else {
        this.setState({ val: 1});
    }
}
.....
 <CheckBox
          value = { this.state.check }
          onChange={() => this.toggleFragment()}
          onValueChange={(newValue) => this.setState({check:newValue})}/>

【讨论】：