时间戳

首页 > 解决方案 > 反应：在菜单标签内时复选框不更新

reactjs - 反应：在菜单标签内时复选框不更新

问题描述

我试图为我的网站创建一个过滤器，用于类别和颜色等内容，并且需要某种带有复选框组的下拉菜单。由于您应该只能检查每个复选框组中的一个元素，因此我决定在单击一个元素时将其他元素的值设置为 false。然而，当我试图让它与菜单一起工作时，我遇到了这个问题：

每当我尝试更新我的复选框时，在菜单标签内以编程方式它不会更新。但是，如果我将它放在菜单标签之外，它就可以正常工作。（我正在使用上下文 api 来更新我的状态）。有谁知道我可能忽略了什么？提前致谢！

const Filters: React.FC = () => {
  const state = useContext(ContextStore);
  return (
    <div>
      <Menu
        forceSubMenuRender={true}
        style={{ width: 256, border: "white" }}
        mode="inline"
      >
        <SubMenu
          key="sub1"
          title={
            <span>
              <span>Category</span>
            </span>
          }
        >
          <Checkbox.Group style={{ paddingLeft: "24px" }} onChange={onChange}>
            <Checkbox
              style={{ display: "block" }}
              value={"jewelry"}
              checked={state.filterChecked}
            >
              Jewelry
            </Checkbox>
            <Checkbox style={{ display: "block" }} value={"paintings"}>
              Paintings
            </Checkbox>
            <Checkbox style={{ display: "block" }} value={"ceramics"}>
              Ceramics
            </Checkbox>
          </Checkbox.Group>
        </SubMenu>

        
      </Menu>
      <Checkbox
        style={{ display: "block" }}
        value={"jewelry"}
        checked={state.filterChecked}
      ></Checkbox>
    </div>
  );

  function selectOnlyThis(id: any) {
    var myCheckbox = document.getElementsByName("myCheckbox");
    Array.prototype.forEach.call(myCheckbox, function (el) {
      el.checked = false;
    });
    id.checked = true;
  }

  function onChange(e: any) {
    state.setFilterChecked(!state.filterChecked);
  }
  
  };

export default Filters;

标签： reactjscheckboxe-commerce

解决方案

实际上我认为它很好用，但是您看不到结果，因为您正在使用useContext，将复选框移动到单独的组件并使用useState，它应该可以解决您的问题

推荐阅读