我正在制作 Discord 嵌入生成器，到目前为止，除了复选框之外，一切都按预期运行。我想知道如何在 React 中制作一个动态复选框，其中每个字段都可以选择为内联或非内联。我用来显示嵌入的模块是 embed-visualizer

基本上，我已经做到了可以通过单击添加和删除按钮来添加和删除输入。将标题和值数据输入到输入中后，它将动态添加到嵌入字段对象中。

我遇到的问题是复选框当前卡在 useState 钩子中的选中状态（ true ），我希望它对添加的每个字段执行的操作是，选中时，将“inline”设置为 true 或在取消选中时将“inline”设置为 false 。

这是我的代码：

const [inputList, setInputList] = useState([{ name: "Title", value: "Value", inline: true }]);

// handle input change
const handleInputChange = (e, index) => {
    const { name, value } = e.target;

    const list = [...inputList];

    list[index][name] = value;

    setInputList(list);
};

// handle click event of the Remove button
const handleRemoveClick = index => {
    const list = [...inputList];
    list.splice(index, 1);
    setInputList(list);
};

// handle click event of the Add button
const handleAddClick = () => {
    setInputList([...inputList, { name: "Title", value: "Value", inline: true }]);
};

let embed = {
    embed: {
        fields: inputList
    }
};

return (
    <div>

        <label className="form-label"><span className="text-danger">*</span> Fields</label>
        <MDBRow>
            {inputList.map((x, i) => {
                return (
                    <MDBCol size="sm">
                        <div style={{ paddingBottom: "5px" }}>
                            <input className="form-control" name="name" placeholder="Field Name" value={x.name} onChange={e => handleInputChange(e, i)} />
                        </div>
                        <div style={{ paddingBottom: "5px" }}>
                            <input className="form-control" name="value" placeholder="Field Value" value={x.value} onChange={e => handleInputChange(e, i)} />
                        </div>
                        <div className="custom-control custom-checkbox">
                            <input type="checkbox" className="custom-control-input" name="inline" checked={x.inline} onChange={e => handleInputChange(e, i)} />
                            <label className="custom-control-label">Inline</label>
                        </div>
                        <div className="btn-box">
                            {inputList.length - 1 === i && <button className="btn btn-success btn-sm" onClick={handleAddClick}>Add</button>}
                            {inputList.length !== 1 && <button className="btn btn-danger btn-sm" onClick={() => handleRemoveClick(i)}>Remove</button>}
                        </div>
                    </MDBCol>
                );
            })}
        </MDBRow>
        <br></br>
    </div>

);