React native props.onClick未定义复选框React Native

我在代码中使用Checkbox组件，我有一个元素列表，每个元素都有一个Checkbox。但是，当我在手机模拟器上检查时，我的复选框返回以下错误：

TypeError: this.props.onClick is not a function. (In 'this.props.onClick()', 'this.props.onClick' is undefined)

我不明白，因为复选框不需要onClick函数

如果需要，请参阅下面的代码：

import CheckBox from 'react-native-check-box'

export default class List extends Component {
constructor(props) {
   super(props)

   this.state = {
      names: [
         {
            key: 0,
            name: 'Element1',
            isChecked: false
         },
         {
            key: 1,
            name: 'Element2',
            isChecked: false, 
         }
      ]
   }
}

   checkboxTest(key){
      let names = this.state.names.reduce((acc,name)=>{
         if(name.key === key){
            return {...name, isChecked: !name.isChecked}
         }
         return name
      }, [])
      this.setState({names})
      console.table(names)
   }


   render(){
      return (
        <ScrollView>

         <View>
            {
               this.state.names.map((item) => (
                <View style={styles.background}>  
                <Text style = {styles.title}>{item.name}</Text>
                <CheckBox value={false} onChange={()=>this.checkboxTest(item.key)}/>
                </View>
               ))
            }
         </View>
         </ScrollView> 
      ) 
}
}

从“反应本机复选框”导入复选框
导出默认类列表扩展组件{
建造师（道具）{
超级（道具）
此.state={
姓名：[
{
关键字：0，
名称：'Element1'，
被检查：错误
},
{
重点:1,，
名称：'Element2'，
检查：错误，
}
]
}
}
复选框测试（键）{
让names=this.state.names.reduce（（acc，name）=>{
如果（name.key==key）{
返回{…name，isChecked:！name.isChecked}
}
返回名称
}, [])
this.setState（{names}）
console.table（名称）
}
render（）{
返回(
{
this.state.names.map（（项）=>(
{item.name}
this.checkboxTest（item.key）}/>
))
}
) 
}
}

根据

react native复选框

需要文档属性

onClick

。但是您正在传递的是

onChange

而不是

onClick

将

onChange

更改为

onClick

，以修复错误。同时将

值更改为
isChecked

<CheckBox isChecked={false} onClick={()=>this.checkboxTest(item.key)}/>

this.checkboxTest（item.key）}/>

编辑

查看下面完整的示例以获取信息

import * as React from "react";
import { Text, View } from "react-native";
import CheckBox from "react-native-check-box";

export default class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      names: [
        {
          key: 0,
          name: "Element1",
          isChecked: false
        },
        {
          key: 1,
          name: "Element2",
          isChecked: false
        }
      ]
    };
  }

  checkboxTest = key => {
    let names = this.state.names.reduce((acc, name) => {
      if (name.key === key) {
        acc.push({ ...name, isChecked: !name.isChecked });
      } else {
        acc.push(name);
      }
      return acc;
    }, []);
    this.setState({ names });
  };

  render() {
    return (
      <View>
        {this.state.names.map((item, index) => (
          <View style={{ flexDirection: " row" }}>
            <Text>{item.name}</Text>
            <CheckBox
              isChecked={
                this.state.names.find(item => item.key == index).isChecked
              }
              onClick={() => this.checkboxTest(item.key)}
            />
          </View>
        ))}
      </View>
    );
  }
}

import*as React from“React”；
从“react native”导入{Text，View}；
从“反应本机复选框”导入复选框；
导出默认类列表扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
姓名：[
{
关键字：0，
名称：“元素1”，
被检查：错误
},
{
重点:1,，
名称：“元素2”，
被检查：错误
}
]
};
}
checkboxTest=key=>{
让names=this.state.names.reduce（（acc，name）=>{
如果（name.key==key）{
acc.push（{…name，isChecked:！name.isChecked}）；
}否则{
acc.push（名称）；
}
返回acc；
}, []);
this.setState（{names}）；
};
render（）{
返回(
{this.state.names.map（（项，索引）=>(
{item.name}
item.key==索引）。已选中
}
onClick={（）=>this.checkboxTest（item.key）}
/>
))}
);
}
}

希望这对你有帮助。请不要怀疑。
如果仔细阅读，您会注意到此复选框组件需要一个
onClick
功能，而您没有提供该功能。因此，您应该使用
onClick
而不是编写
onChange

{
这是我的国家({
已检查：！this.state.isChecked
})
}}
isChecked={this.state.isChecked}
leftText={“复选框”}
/>