如何在ReactJS中实现动态复选框——解决Discord Embed Builder中复选框状态无法切换问题

嘿，这个问题我太熟了！你的复选框一直处于选中状态，根本原因是你在处理复选框的状态时用错了属性。

普通输入框的状态存在e.target.value里，但复选框不一样——它的选中/未选中状态是存在e.target.checked这个布尔值里的。你现在的handleInputChange函数不管什么输入类型都赋值value，而复选框的默认value是字符串"on"，把它转成布尔值永远是true，所以你的复选框就永远处于选中状态了。

解决方案：修改状态处理逻辑 #

你只需要在handleInputChange函数里判断输入类型，针对复选框单独处理即可：

const handleInputChange = (e, index) => {
  const { name, value, type, checked } = e.target;
  const list = [...inputList];
  // 复选框用checked属性，其他输入框用value属性
  list[index][name] = type === 'checkbox' ? checked : value;
  setInputList(list);
};

如果你想更精准地针对inline字段处理（毕竟只有它是复选框），也可以这么写：

const handleInputChange = (e, index) => {
  const { name, value, checked } = e.target;
  const list = [...inputList];
  list[index][name] = name === 'inline' ? checked : value;
  setInputList(list);
};

效果验证 #

修改之后，当你勾选或取消勾选复选框时，对应字段的inline属性会正确被设置为true或false，inputList的状态也会正常更新，你的embed字段就能正确响应inline的设置，embed-visualizer也能渲染出符合预期的布局了。

内容的提问来源于stack exchange，提问作者NTM Nathan