Question

我正在通过React Native中的一系列称为能力的对象进行映射，我从后端检索它们并尝试选择分配给每个项目的每个对象（能力）。但是选择其中之一，将其全部选中。如何有效地选择handleConfirm中的单个复选框？

    class Example extends Component {
        constructor(props) {
            super(props);
            this.state = {
                checked: false,
            };

            this.handleConfirm = this.handleConfirm.bind(this);

        handleConfirm () {this.setState({ checked: true })}

         render() {
            const {
                checked
                } = this.state;


            return (
                <Container>
                    <Content contentContainerStyle={styles.container}>
                        <ListItem style={styles.listAllItems}>
                            {abilities.map((ability, index) => 

                                <Button
                                    key={index}
                                    iconLeft
                                    style={styles.button}
                             >
                                    <Text>{ability.name + '\n'}</Text>
                                    <Right>
                                        <CheckBox
                                        checked={checked}
                                        onPress={ this.handleConfirm()}/>
                                    </Right>
                                </Button>

                            )}
                        </ListItem>
                    </Content>
                </Container>

Answer 1

在代码中遗漏的内容以下：

1] As you are mapping through array of object, you need to manage each checkbox state, which is missing in your code(i.e. you have used a single variable for maintaining check-boxes state which is not correct). You need a array for managing checked/unchecked status of each checkbox.
2] Also it has been observed that, you are handling only checked true condition. Actually you need to handle toggle(checked=>unchecked and unchecked=>checked).

针对您的问题，我还对您的代码进行了一些修改，并且还进行了以上指定的修改：

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
          checked: []
        };
    }

    isItemChecked(abilityName) {
        return this.state.checked.indexOf(abilityName) > -1
    }

    manageToggle = (evt, abilityName) => {
        if (this.isItemChecked(abilityName)) {
          this.setState({
            checked: this.state.checked.filter(i => i !== abilityName)
          })
        } else {
          this.setState({
            checked: [...this.state.checked, abilityName]
          })
        }
    }

    render() {

        return (
            <Container>
                <Content contentContainerStyle={styles.container}>
                    <ListItem style={styles.listAllItems}>
                        {abilities.map((ability, index) => 

                            <Button
                                key={index}
                                iconLeft
                                style={styles.button}
                         >
                                <Text>{ability.name + '\n'}</Text>
                                <Right>
                                    <CheckBox
                                        checked={this.isItemChecked(name)}
                                        onPress={evt => this.manageToggle(evt, ability.name)}/>                                     
                                </Right>
                            </Button>

                        )}
                    </ListItem>
                </Content>
            </Container>

Answer 2

在复选框中为onPress执行此操作

onPress={()=>{ this.handleConfirm()}}

地图选择的本机复选框

2 个答案: