javascript - 使复选框类型的输入由 API 标记，并在交互时更改其状态

Question

你好，开发者，我希望你一切都好。我希望API检查复选框并在交互时更改它们的状态，事实是我已经尝试了几件事，但我没有找到解决方案

- 应标记的 API 带来的角色状态。

roles: [
    {
        "id": 3,
        "name": "Firmante"
    },
    {
        "id": 4,
        "name": "Trabajador"
    }
]

-所有角色也来自API

const[allRoles, setAllRoles] = [
    {
      "id": 2,
      "name": "Administrador"
    },
    {
      "id": 3,
      "name": "Firmante"
    },
    {
      "id": 4,
      "name": "Trabajador"
    },
    {
      "id": 5,
      "name": "Gestión de Usuarios"
    },
    {
      "id": 6,
      "name": "Admin Workflow"
    },
    {
      "id": 7,
      "name": "Representante Legal"
    },
    {
      "id": 8,
      "name": "Seguimiento de Notificaciones"
    }
  ]

- 到目前为止绘制的“角色”

<dt>
          <label className="mb-2">Roles</label>
            {allRoles.map(role =>{
              return (
                <div>
                  <label className="new-control new-checkbox checkbox-primary">
                    <input
                      name={role.id}
                      type="checkbox"
                      name="features"
                      class="new-control-input"
                      onChange={onChangeChecked}
                    />
                    <span class="ml-2 new-control-indicator">{role.name}</span>
                  </label>
                </div>
              )
            })}
        </dt>

-UI 图像

非常感谢您提前...

score 1 · Accepted Answer

您需要设置checked复选框的属性

你也定义name了两次

<input
 name={role.id}
 type="checkbox"
 class="new-control-input"
 onChange={onChangeChecked}
 checked="checked"
/>

score 0 · Accepted Answer

使用 useEffect 标记来自 api 的复选框。
创建一个数组来保存已检查的所有 id。

在输入中使用checked 属性来识别id 是否存在于checked 数组中。

const [allRoles, setAllRoles] = useState([
  {
    id: 2,
    name: "Administrador"
  },
  {
    id: 3,
    name: "Firmante"
  },
  {
    id: 4,
    name: "Trabajador"
  },
  {
    id: 5,
    name: "Gestión de Usuarios"
  },
  {
    id: 6,
    name: "Admin Workflow"
  },
  {
    id: 7,
    name: "Representante Legal"
  },
  {
    id: 8,
    name: "Seguimiento de Notificaciones"
  }
]);

const [checkedRoles] = useState([
  {
    id: 3,
    name: "Firmante"
  },
  {
    id: 4,
    name: "Trabajador"
  }
]);

const [acceptedRoles, setAcceptedRoles] = useState([]);

useEffect(() => {
  const rolesIds = checkedRoles.map((r) => r.id.toString());
  setAcceptedRoles(rolesIds);
}, [checkedRoles]);

const onChangeChecked = (e) => {
  let newCheckedRoles = [];

  const isExist = checkedRoles.filter(
    (r) => r.id.toString() === e.target.id
  );

  if(isExist && isExist.length > 0) {
     newCheckedRoles = checkedRoles.filter(
       (r) => r.id.toString() !== e.target.id
     );
   }else {
      newCheckedRoles = [...checkedRoles, {
        id: e.target.id,
        name: e.target.name
      }]
   }

  setCheckedRoles(newCheckedRoles);
};

return (
  <div className="App">
    <dt>
      <label className="mb-2">Roles</label>
      {allRoles.map(({ name, id }, i) => {
        return (
          <div key={i}>
            <label className="new-control new-checkbox checkbox-primary">
              <input
                id={id}
                type="checkbox"
                name="features"
                className="new-control-input"
                onChange={onChangeChecked}
                checked={acceptedRoles.includes(id.toString())}
              />
              <span className="ml-2 new-control-indicator">{name}</span>
            </label>
          </div>
        );
      })}
    </dt>
  </div>
);

工作示例演示 - codesandbox.io/s/stupefied-wozniak-4ye6l

score 0 · Accepted Answer

You need to use checked to set the condition for when the checkbox is checked but also value to make sure the correct value is passed when the onChange event is fired. Sample implementation - https://codesandbox.io/s/focused-dream-yv7kj?file=/src/App.js

javascript - 使复选框类型的输入由 API 标记，并在交互时更改其状态

3 回答 3

Related

Reference