Как мы можем установить / снять отметку с отдельного флажка в плоском списке на основе индекса или по ключу в реагирующем собственном плоском списке - PullRequest
Новая
       4

Как мы можем установить / снять отметку с отдельного флажка в плоском списке на основе индекса или по ключу в реагирующем собственном плоском списке

0 голосов
/ 27 января 2020

есть значение состояния 

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

Текстовые входы и флажки находятся в плоском списке, каждый текстовый ввод и флажок отображаются в каждой ячейке. Как я могу обновить значение флажка в массиве по индексу при вызове onClick of флажка без использования переменных состояния или глобальных переменных?

Я обновляю значения ввода текста, как показано ниже 

   <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 по индексу или по ключу, не используя переменные состояния или глобальные переменные, и обновить в объекте saveData.

1 Ответ

1 голос
/ 28 января 2020

импорт CheckBox из 'response-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>
        )
    }
}

надеюсь, это поможет

...