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

Question

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）：无法读取未定义的属性 'value'

Answer 1

修改你的handleCheckBoxClic如下

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

  }

希望它会起作用，顺便说一句，我已经添加了控制台供您从 currentTarget/input

检查 id/value/checked

更新

尝试 onChange={handleCheckboxClick} 而不是 onClick={handleCheckboxClick}

我用 let 而不是 var let id=input.id;

@ShashiWDN 您可以尝试使用以下代码来获取复选框 ID 和 checked/value

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

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

onClick handler of react checkbox gives error

reactjs

graphql

apollo-client