一旦将复选框设置为在 React 中选中，复选框就不会被取消选中

Question

我在 React 中创建了一个动态数据 table，它从 JSON 文件中获取所有数据。 table 列字段之一是 'answered-status'，用于给出查询的答复状态，无论是否已答复。

我有一个 'answered' 键，其值在 JSON 中已回答或未回答。当我在复选框中使用该值时。我无法切换回原始值。请检查下面的沙箱 link 以了解更多详细信息。我使用 Bootstrap 4 自定义复选框。

https://p7h9x.csb.app/

Answer 1

首先没有切换复选框的代码

查询列表缺少第二个状态

constructor(props) {
    super(props);
    this.state = {
        searchInquiries: null,
        answerStatus: "all",
        inquiresList : InquiresList //<--- settting into state for maintaining change
    };
}

toggleCheck = (event,inquiry_id) => {
    const inquiresList = this.state.inquiresList.map(inquiry => {
        return inquiry.id === inquiry_id ? { ...inquiry , "answered" : event.target.checked ? "answered" : "unanswered" } : inquiry
    })
    this.setState({inquiresList}); //<---- Updating state 
};

// There is no need of turnery operator for checked unchecked whole input
<input
    type="checkbox"
    ref="answerStatus"
    checked={inquiry.answered === "answered"} // <---- HERE
    onChange={(e) => this.toggleCheck(e,inquiry.id)} // <---- HERE
    className="custom-control-input"
    id={"answer-status-" + inquiry.id}
    name={"answer-status-" + inquiry.id}
/>

工作演示

关于inquiresList函数的进一步解释：

const inquiresList = this.state.inquiresList.map(inquiry => {
    return inquiry.id === inquiry_id ? // checking if inquiry id match
            // if matched we need to update that object
            { ...inquiry , "answered" : event.target.checked ? "answered" : "unanswered" } :  
            // else pass the same object as it is
            inquiry // else pass the same object as it is
})


// Why this way?
// because, we don't want to mutate state directly
{ 
    ...inquiry , // <-- extract all elements inside inquiry
    "answered" : event.target.checked ? "answered" : "unanswered" // <--- We are override the value with it
}

一旦将复选框设置为在 React 中选中，复选框就不会被取消选中

Checkbox didn't get unchecked once set it to checked in React

typescript

reactjs

react-forms