Question

我有这个复选框示例

constructor(props) {
    super(props);
    this.state = {
    check: true,
    };}

checkBoxtTest(){
this.setState(
 {check:!this.state.check})}

退货

 <CheckBox
    value={this.state.check} onChangee={()=>this.checkBoxtTest()}
/>

当我再次按下复选框时，值保持不变

Answer 1

您遇到错字“ onChange”

<CheckBox
    value={this.state.check} onChange={()=>this.checkBoxtTest()}
/>

如果您正在使用状态更改状态，请按照以下方式

this.setState((prevState) => ({check: !prevState.check}))

您可以使用箭头功能代替普通功能

checkBoxtTest = () => {
    this.setState((prevState) => ({check: !prevState.check}));
}

Answer 2

首先，将其更改为onChange。根据最佳做法，建议将checkBoxTest绑定到constructor中。

constructor(props) {
    super(props);
    this.state = {
    check: true,
    };
    this.checkBoxtTest = this.checkBoxtTest.bind(this);
}

checkBoxtTest(){
  this.setState({
    check : !this.state.check
  })
}

<CheckBox value={this.state.check} onChange={this.checkBoxtTest()} />

Answer 3

import React, { Component } from 'react';
import { Container, Content, ListItem, CheckBox, Text, Body } from 'native-base';
export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            checked: true
        }
    }

    render() {
        return (
            <Container>
                <Content>
                    <ListItem>
                        <CheckBox
                            checked={this.state.checked}
                            onPress={() => this.setState({checked: !this.state.checked})}
                        />
                        <Body>
                        <Text>Finish list Screen</Text>
                        </Body>
                    </ListItem>
                </Content>
            </Container>
        );
    }
}

复选框切换无法正常工作

3 个答案: