javascript - 我们如何根据索引或 react native 平面列表中的键检查/取消选中平面列表中的单个复选框

Question

有一个状态值

savedData:{
        firstName: '',
        lastName: '',
        mobile: '',
        email: '',
        password: '',
        forgotPassword: '',
        checkbox1: false,
        checkbox2: false
      }

文本输入和复选框位于平面列表中，每个文本输入和复选框都呈现在每个单元格中。当调用复选框的 onClick 时，如何通过索引更新数组中复选框的值，而不使用状态变量或全局变量？

我正在更新文本输入值，如下所示

   <Input
       placeholder={item.key}
       placeholderTextColor={'grey'}
       onChangeText={this.updateText.bind(this,item.key)}
       onSubmitEditing={ (event) => console.log(event)}
       underlineColorAndroid="transparent"
   />
  updateText(text,key){
    var change = this.state.savedData;
    var string1 = key;
    change[text] = string1;
    this.setState({ savedData: change });
  }

如何在不使用状态变量或全局变量的情况下通过索引或基于键更新 checkbox1 和 checkbox2 值并在 savingData 对象中更新。

Answer 1

从“react-native-check-box”导入复选框；

export default class CheckBox extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            data: [{
                firstname: 'abc',
                lastname: 'xyz',
                checked1: false,
                checked2: false,
            },
            {
                firstname: 'abc',
                lastname: 'xyz',
                checked1: false,
                checked2: false,

            },
            {
                firstname: 'abc',
                lastname: 'xyz',
                checked1: false,
                checked2: false,
            }],
        }
    }

    isCheckedOrNot(type, item, index) {
        if (type === 'cb1') {
            this.state.data[index].checked1 = !this.state.data[index].checked1;
        } else {
            this.state.data[index].checked2 = !this.state.data[index].checked2;
        }
        this.setState({
            data: this.state.data
        })
    }

    renderItem({ item, index }) {

        return (
            <View style={{ flexDirection: 'row', margin: 10 }}>
                <Text style={{ marginLeft: 5 }}> {item.firstname} </Text>
                <Text style={{}}> {item.lastname}, </Text>
                <CheckBox
                    value={item.isChecked1}
                    onClick={() => {
                        this.isCheckedOrNot('cb1', item, index)
                    }}
                    isChecked={item.checked1}
                />
                <Text style={{ marginLeft: 5 }}> checkbox 1</Text>
                <CheckBox
                    onClick={() => {
                        this.isCheckedOrNot('cb2', item, index)
                    }}
                    isChecked={item.checked2}
                />
                <Text style={{ marginLeft: 5 }}> checkbox 2</Text>
            </View>
        )
    }

    render() {
        return (
            <View style={{ flex: 1 }}>
                <FlatList
                    data={this.state.data}
                    renderItem={this.renderItem.bind(this)}
                    showsVerticalScrollIndicator={false}
                />
            </View>
        )
    }
}

希望对你有帮助