onChange事件未触发在React JS中

Question

export default function ActionRolesPage(props) {
      const [authorities, setAuthorities] = useState([]);
      const [name, setName] = useState("");
      let list = [];
      useEffect(() => {
        getAuthorities();
      }, []);
      const getAuthorities = () => {
        doGetAllAuthorities()
          .then((res) => {
            getValidatedData(res.data, "array").map((data) => (
              list.push({ authority: data})
            ))
            setAuthorities(list);
          }).catch((e) => {
            console.log(e);
          })
      }
      const handleChange = (e) => {
        console.log(e);
        const { name, checked } = e.target
        console.log(name,checked);
        let tempUser = authorities.map((user) => (
          user.authority === name ? { ...user, isChecked: checked } : user
        ));
        setAuthorities(tempUser);
      }
    
      if(authorities.length){
        console.log(authorities);
      }
    
      
      return (
        <React.Fragment>
          <Suspense fallback={<div>Loading....</div>}>
            <div className="page-content">
              <MetaTags>
                <title>Add Role | IG One</title>
              </MetaTags>
              <Container fluid>
                <Breadcrumb
                  title="Add Role"
                  breadcrumbItems={[{ title: "Settings" }, { title: "Roles" }, { title: "Add" }]}
                />
                <Form onSubmit={handleSubmit}>
                  <Card>
                    <CardBody>
                      <Row className="mb-3">
                        <label
                          htmlFor="example-text-input"
                          className="col-md-2 col-form-label"
                        >
                          Name
                        </label>
                        <div className="col-md-8 mx-0">
                          <Input
                            className="form-control"
                            type="text"
                            name="name"
                            required
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            placeholder="Name Of User "
                          />
                        </div>
                      </Row>
                      <br></br>
                      <br></br>
                      <Row className="mb-3">
                        <CardTitle>
                          Authorities
                        </CardTitle>
                        <div className="col-md-2">
    
                          {
                           
                              authorities.map((data,index) => (
                                <>
                                  <div key={index} style={{ display: "flex" }}>
                                    <div className='col-md-10 mx-0 mt-2'>
                                      <Input type={"checkbox"}
                                        checked={data?.isChecked || false}
                                        name={data.authority}
                                        onChange={(e) => console.log(e)}
                                        className="form-control"
                                        style={{ cursor: "pointer", paddingLeft: "1rem" }}
                                      /></div>
                                    <div>
                                      <label style={{ cursor: "pointer" }} htmlFor={data.authority} className="col-md-50 col-form-label"> {data.authority}</label>
                                    </div>
                                  </div>
                                </>
                              )) 
                          }
                        </div>
                      </Row>
                      <Row className="d-flex justify-content-center mt-4">
                        <Button color="dark" type='submit' className="btn-xs" style={{ width: "40%", cursor: "pointer" }}
                        >
                          Add Role
                        </Button>
                      </Row>
                    </CardBody>
                  </Card>
                </Form>
              </Container>
            </div>
          </Suspense>
        </React.Fragment>
      )
    } 

这是整个代码。我想处理多个复选框，但没有触发Onchange事件。触发OnChange时，它调用了一个函数处理，但是在我的情况下，控制台没有出现错误，并且在控制台上没有显示任何事件，请解决我的疑问。

我还需要更新从后端获得响应的表格，请检查授权名称阵列如何在复选框中处理检查状态。

Answer 1

如果您已经为 Input 创建了一个自定义组件，请将OnChange处理程序作为Prop传递，并在组件中以＆lt; Input＆gt;字段的方式打电话。或者，如果您使用了任何第三方LIB，则只需将回调作为道具。否则，请尝试以下方法：＆lt; input＆gt;，而不是＆lt; input＆gt;

<input type={"checkbox"}
       checked={data?.isChecked || false}
       name={data.authority}
       onChange={(e) => console.log(e)}
       className="form-control"
       style={{ cursor: "pointer", paddingLeft: "1rem" }}
     />