Как поместить элемент в массив, если установлен флажок в React Native?

Question

Я сопоставляю массив и проверяю флажок. Но я проверял это в customCheckbox. Я хочу отправить проверенные позиции участвующим друзьям: []

Как вызвать проверенное состояние из флажка и добавить проверенный элемент в массив

Но я не совсем уверен, как мне этого добиться, надеюсь, мне кто-нибудь поможет.

Мое состояние

state={involvedFriends:[]}

AddFriendScreen

{this.state.involvedFriends.map((name, key) => (
        <View>
          <CustomCheckbox name={name}/>
        </View>
      ))}

CustomCheckbox

this.state = {
  checked: false,
};

toggleChange = () => {
     this.setState({ checked: !this.state.checked })};

render() {
return (
  <View style={styles.container}>
    <Text style={styles.text}>{this.props.name}</Text>
    <CheckBox
      checked={this.state.checked}
      onPress={() => this.toggleChange()}
    />
  </View>
)}

Answer 1

Вы можете отправить результат переключения на родительский компонент с помощью обратного вызова. есть два обратных вызова для добавления и удаления элемента из массива путем проверки и снятия флажка customCheckbox.

это пример кода:

CustomCheckbox

this.state = {
  checked: false,
};

toggleChange = () => {
     if (!this.state.checked){ // it is checking true now...
         this.prop.checkedTrue(this.props.name)
     } else {
         this.prop.checkedFalse(this.props.name)
     }
     this.setState({ checked: !this.state.checked })
};

render() {
return (
  <View style={styles.container}>
    <Text style={styles.text}>{this.props.name}</Text>
    <CheckBox
      checked={this.state.checked}
      onPress={() => this.toggleChange()}
    />
  </View>
)}

AddFriendScreen

puchToArray = (name) => {
    let tmp = this.state.involvedfriends
    tmp.push(name)
    this.setState({ involvedfriends: tmp })
}

removeFromArray = (name) => {
    let tmp = this.state.involvedfriends
    let index = tmp.indexOf(name);
    if (index>-1){
        tmp.splice(index, 1);
        this.setState({ involvedfriends: tmp })
    }
}


render:
        {this.state.involvedFriends.map((name, key) => (
            <View>
               <CustomCheckbox 
                   name={name}
                   checkedTrue = {(name) => {this.puchToArray(name)}}
                   checkedFalse = {(name) => {this.removeFromArray(name)}}
               />
            </View>
        ))}

Надеюсь, это поможет вам.

Answer 2

Можете ли вы изменить, как это

 constructor(props) {
        super();
        this.state = {
            involvedFriends: []
        }
        this.insertName= this.insertName.bind(this);
    }

    insertName(name, isChecked) {
        if (isChecked == true) {
            this.state.involvedFriends.push(name);
        } else {
         this.state.involvedFriends.splice(this.state.involvedFriends.indexOf(name), 1);
        }
    }

{this.state.involvedFriends.map((name, key) => (
        <View>
          <CustomCheckbox name={name} insertName={this.insertName}/>
        </View>
      ))
}

CustomCheckbox.js

this.state = {
  checked: false,
};

toggleChange = (name) => {
     this.setState({ checked: !this.state.checked })
     this.props.insertName(name, !this.state.isChecked)
};

render() {
return (
  <View style={styles.container}>
    <Text style={styles.text}>{this.props.name}</Text>
    <CheckBox
      checked={this.state.checked}
      onPress={() => this.toggleChange(this.props.name)}
    />
  </View>
)}

Answer 3

Как то так.

В вашем AddFriendScreen передайте этот обратный вызов каждому вашему CustomCheckbox.

        <CustomCheckbox
            onChecked={(item) => {
                let array = this.state.involvedFriends;
                array.push(item);
                this.setState({
                    involvedFriends: array
                })
            }}
        />

Затем в вашем CustomCheckbox вы можете вызвать обратный вызов в toggleChange.

toggleChange = () => {
    if (!this.state.checked) {
        this.props.onChecked(this.props.name);
    }
    this.setState({
        checked: !this.state.checked
    });
}

Это должно добавить имя в массив всякий раз, когда флажок установлен.