Javascript 反应本机-复选框无法取消选中；勾选“；箱

我已经使用React native一个月了，但这是我第一次在应用程序中使用复选框。因此，最近我一直在努力检查平面列表中的特定复选框，但现在我可以了

但是在测试我的复选框时，我注意到一旦我选中了一个特定的复选框（或多个复选框），它就不会取消选中。

所以，我的目标是创建一个复选框，它可以选中（当然）也可以取消选中，如果用户错误地选中或误选复选框

这是我的密码

export default class tables extends Component {
    constructor(props){
        super(props)
        this.state = {
            ...
            check: false
        }
    }
    checkBox_Test = (item, index) => {
        let { check } = this.state;
        check[index] = !check[index];
        this.setState({ check: check })

        alert("now the value is " + !this.state.check);
        alert("now the value is " + item.tbl_id);
        console.log(item.tbl_id)
    }
    render() {
        return(
             <View>
                  ....
                  <Flatlist
                        ....
                        <CheckBox
                           value = { this.state.check }
                           onChange = {() => this.checkBox_Test(item) }
                        />
                        ....
                  />
             <View/>
        )
    }
}

导出默认类表扩展组件{
建造师（道具）{
超级（道具）
此.state={
...
检查：错误
}
}
复选框_Test=（项目、索引）=>{
让{check}=this.state；
检查[索引]=！检查[索引]；
this.setState（{check:check}）
警报（“现在值为“+！this.state.check”）；
警报（“现在值为“+项.待确定id”）；
console.log（item.tbl\u id）
}
render（）{
返回(
....
....
/>
)
}
}

---

方法1：检查

对象

export default class tables extends Component {
constructor(props){
    super(props)
    this.state = {
        ...
        check: {}
    }
}
checkBox_Test = (id) => {
    const checkCopy = {...this.state.check}
    if (checkCopy[id]) checkCopy[id] = false;
    else checkCopy[id] = true;
    this.setState({ check: checkCopy });
}
render() {
    return(
         <View>
              ....
              <Flatlist
                    ....
                    <CheckBox
                       value = { this.state.check[item.tbl_id] }
                       onChange = {() => this.checkBox_Test(item.tbl_id) }
                    />
                    ....
              />
         <View/>
    )
}
}

导出默认类表扩展组件{
建造师（道具）{
超级（道具）
此.state={
...
检查：{}
}
}
复选框_Test=（id）=>{
const checkCopy={…this.state.check}
如果（checkCopy[id]）checkCopy[id]=false；
else checkCopy[id]=true；
this.setState（{check:checkCopy}）；
}
render（）{
返回(
....
....
/>
)
}
}

方法2：为每个平面列表项创建单独的项

class ListItem extends Component {
  constructor(props){
    super(props)
    this.state = {
        ...
        check: false
    }
 }

  checkBox_Test = (id) => {
    this.setState((prevState) => ({ check: !prevState.check }));
  }

  render() {
    return(
         <View>
           <CheckBox
              value = { this.state.check }
              onChange = { this.checkBox_Test }
           />
         </View>
    )
   }
 }

类ListItem扩展组件{
建造师（道具）{
超级（道具）
此.state={
...
检查：错误
}
}
复选框_Test=（id）=>{
this.setState（（prevState）=>（{check:！prevState.check}））；
}
render（）{
返回(
)
}
}

---

让我知道它是否适合您

方法1：检查

对象

export default class tables extends Component {
constructor(props){
    super(props)
    this.state = {
        ...
        check: {}
    }
}
checkBox_Test = (id) => {
    const checkCopy = {...this.state.check}
    if (checkCopy[id]) checkCopy[id] = false;
    else checkCopy[id] = true;
    this.setState({ check: checkCopy });
}
render() {
    return(
         <View>
              ....
              <Flatlist
                    ....
                    <CheckBox
                       value = { this.state.check[item.tbl_id] }
                       onChange = {() => this.checkBox_Test(item.tbl_id) }
                    />
                    ....
              />
         <View/>
    )
}
}

导出默认类表扩展组件{
建造师（道具）{
超级（道具）
此.state={
...
检查：{}
}
}
复选框_Test=（id）=>{
const checkCopy={…this.state.check}
如果（checkCopy[id]）checkCopy[id]=false；
else checkCopy[id]=true；
this.setState（{check:checkCopy}）；
}
render（）{
返回(
....
....
/>
)
}
}

方法2：为每个平面列表项创建单独的项

class ListItem extends Component {
  constructor(props){
    super(props)
    this.state = {
        ...
        check: false
    }
 }

  checkBox_Test = (id) => {
    this.setState((prevState) => ({ check: !prevState.check }));
  }

  render() {
    return(
         <View>
           <CheckBox
              value = { this.state.check }
              onChange = { this.checkBox_Test }
           />
         </View>
    )
   }
 }

类ListItem扩展组件{
建造师（道具）{
超级（道具）
此.state={
...
检查：错误
}
}
复选框_Test=（id）=>{
this.setState（（prevState）=>（{check:！prevState.check}））；
}
render（）{
返回(
)
}
}

---

让我知道它是否适合您

谢谢您，先生！：）方法1在我的案例中非常有效。那么如果我可以问一下，你知道我们如何传递带有复选框的项目吗？就像我检查表1，然后将其传递到下一个屏幕。@PurpleViolet您可以将所选项存储在类变量中，例如this.selectedItem=item；当复选框为true时。现在你可以在任何地方使用selectedItem。对我来说，第一种方法不起作用。当添加

console.log

到

checkBox\u Test

时，我只在第一次更改时看到输出。谢谢您，先生！：）方法1在我的案例中非常有效。那么如果我可以问一下，你知道我们如何传递带有复选框的项目吗？就像我检查表1，然后将其传递到下一个屏幕。@PurpleViolet您可以将所选项存储在类变量中，例如this.selectedItem=item；当复选框为true时。现在你可以在任何地方使用selectedItem。对我来说，第一种方法不起作用。将

console.log

添加到

checkBox\u Test

时，我只在第一次更改时看到输出。