react复选框的onClick处理程序给出错误

2024-04-27 • 问答

我组件的

return方法具有以下代码段：

              <List>
               {items.length > 0
                    &&items.map((item,index) => (
                      <List.Item>
                      <Checkbox> 
                      id={item.id}
                      onClick={handleCheckboxClick}                   
                      label={
                      <label> 
                      <Preferencetag tagStyles={[styles.orange]}>
                      {item.name}
                      </Preferencetag>
                      </label>
                             }
                      <Checkbox/>
                      </List.Item>
                    ))} 
               </List>

handleCheckBoxClick方法是这样的：

const handleCheckboxClick= async ()=> {
   var id=this.id;
    const result = await client.mutate({
      mutation:deleteIndustry,variables:{
        industryId:id
      }
    })

  }

变异是：

const deleteIndustry=gql`
mutation deleteIndustry($industryId:String){
  deleteIndustry(industryId:$industryId)
}
`

当我单击一个复选框时，出现以下错误： 未处理的拒绝（TypeError）：无法读取未定义的属性“值”

只需按以下步骤修改handleCheckBoxClic

const handleCheckboxClick= async ({currentTarget: input})=> {
   console.log(input);
   let id=input.id;
    const result = await client.mutate({
      mutation:deleteIndustry,variables:{
        industryId:id
      }
    })

  }

希望它能正常工作，顺便说一句，我已经添加了控制台供您检查id / value /从currentTarget / input中检查

更新

尝试用onChange={handleCheckboxClick}代替onClick={handleCheckboxClick}

我用let代替var let id=input.id;

@ShashiWDN，您可以尝试以下代码来获取复选框ID和已检查/值

//to get the ID console.log(input.children[0].id); //to get the value console.log(input.children[0].checked);

react复选框的onClick处理程序给出错误

hhq5814 回答：react复选框的onClick处理程序给出错误

大家都在问