Реальная хитрость в этом заключается в том, чтобы поддерживать список выбранных элементов в родительском компоненте.Каждый CheckBoxItem может управлять своим собственным состоянием, но вам нужно будет передавать значение обратно родительскому компоненту каждый раз, когда он отмечен / не отмечен.
Поскольку вы еще не показали, куда пришел ваш компонент CheckBoxот, я покажу вам, как это сделать, используя react-native-elements CheckBox.Принципы могут быть применены к вашему собственному CheckBox.
Вот это App.js
import CheckBoxItem from './CheckBoxItem'
export default class App extends React.Component {
// set some initial values in state
state = {
response: [
{
name:'first'
},
{
name:'second'
},
{
name:'third'
},
{
name:'fourth'
},
{
name:'fifth'
},
{
name:'sixth'
},
],
selectedBoxes: [] // this array will hold the names of the items that were selected
}
onUpdate = (name) => {
this.setState(previous => {
let selectedBoxes = previous.selectedBoxes;
let index = selectedBoxes.indexOf(name) // check to see if the name is already stored in the array
if (index === -1) {
selectedBoxes.push(name) // if it isn't stored add it to the array
} else {
selectedBoxes.splice(index, 1) // if it is stored then remove it from the array
}
return { selectedBoxes }; // save the new selectedBoxes value in state
}, () => console.log(this.state.selectedBoxes)); // check that it has been saved correctly by using the callback function of state
}
render() {
const { response } = this.state;
return (
<View style={styles.container}>
{
response.map(item => <CheckBoxItem label={item.name} onUpdate={this.onUpdate.bind(this,item.name)}/>)
}
</View>
);
}
}
Вот это CheckBoxItem
import { CheckBox } from 'react-native-elements'
class CheckBoxItem extends Component<Props> {
state = {
check: false, // by default lets start unchecked
}
onValueChange = () => {
// toggle the state of the checkbox
this.setState(previous => {
return { check: !previous.check }
}, () => this.props.onUpdate());
// once the state has been updated call the onUpdate function
// which will update the selectedBoxes array in the parent componetn
}
render() {
return (
<View>
<CheckBox
title={this.props.label}
checked={this.state.check}
onPress={this.onValueChange}
/>
</View>
);
}
}
export default CheckBoxItem;
Объяснение
Когда создается CheckBoxItem, ему передаются две вещи.Один - это метка, а второй - функция onUpdate.Функция onUpdate связывает CheckBoxItem обратно с родительским компонентом, чтобы он мог манипулировать состоянием в родительском компоненте.
Функция onUpdate принимает предыдущее значение состояния перед применением этого обновления и проверяет, существует ли имя флажка в массиве selectedBoxes.Если он существует в массиве selectedBoxes, он удаляется, в противном случае он добавляется.
Теперь в родительском компоненте существует массив, к которому вы можете получить доступ, который содержит все выбранные элементы.
Закуска
Хотите опробовать мой код?Ну, я создал закуску, которая показывает, что она работает https://snack.expo.io/@andypandy/checkboxes
Состояние установки
Возможно, вы заметили, что я делаю некоторые необычные вещи с setState.Я проверяю, что setState вызывается правильно, используя предыдущее значение состояния, а затем применяю мои обновления к нему.Я также использую тот факт, что setState принимает обратный вызов для выполнения действий после обновления состояния.Если вы хотите прочитать больше, вот несколько замечательных статей по setState.