Question

我正在映射数组并选中复选框。但是我在customCheckbox中对其进行了检查。我想将选中的项目推送给参与的朋友：[]

如何从Checkbox调用选中状态，并将选中项添加到数组

但是我不太确定我将如何实现它，希望有人可以帮助我。

我的状态

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

这样的事情。

在您的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
    });
}

每当选中此复选框时，都应将名称添加到数组中。

Answer 2

您可以使用回调将切换结果发送到父组件。有两个回调，可以通过选中和取消选中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 3

你能这样改变吗

 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>
)}

如果在React Native中选中，如何将项目推送到数组？

3 个答案: