英文:
Can't change checkbox to be checked, must reload page to be checked
问题
以下是您要求的翻译内容：
我有一张数据表，其中有一个复选框字段，允许人们选中或取消选中它。
如果我点击未选中的复选框，它将发送到数据库，将该清单的状态更改为 true；如果我点击选中的复选框，它将发送到数据库，将该清单的状态更改为 false。我已经实现了这个功能，并在数据库中更改了状态。
这是 JSON 数据，如果我点击未选中的复选框，
从这个：
data={"Id":"123", "checklist": false}
变成这个：
data={"Id":"123", "checklist": true}
问题是，当我点击复选框时，界面上的复选框不会变为选中状态，我需要重新加载页面才能使其选中。
这是我的代码片段：
class Apps extends React.Component {
constructor (props) {
super(props);
this.state = {
blablabla:"ex"
}
this.onCheckChange=this.onCheckChange.bind(this)
}
onCheckChange(e){
console.log(e.target.checked)
this.setState({
[e.target.name]:e.target.checked
})
}
onSubmitChecklistClicked = async (Id) => {
var response = await RequestHandler(`${ENVIRONMENT.API_URL}api/v1.0/checklist`, {}, {Id})
console.log(response);
}
render () {
return(
<Input type="checkbox" className="input-checked"
checked={data.checklist}
onChange={this.onCheckChange,() => this.onSubmitChecklistClicked(data.Id)}></Input>
)
}
}
第一次，清单是选中还是未选中是基于数据库提供的 JSON，我不知道问题出在 onCheckChange 函数、checked{} 属性还是 onChange{} 属性上。
英文:
I have a table of data, and it has checkbox field which allows people to check or uncheck it.
If i click the unchecked checkbox, it will send to database to make status of that checklist to be true, as
if i click the checked checkbox, it will send to database to make status of that checklist to be false. I have made it and do the change status in database.
this is the JSON data if i click the unchecked checkbox,
from this
data={"Id":"123", "checklist": false}
to this
data={"Id":"123", "checklist": true}
The problem is when i click it it doesn't change the checkbox to be checked in interface, i need to reload page to make it checked
This is my code snippet:
class Apps extends React.Component {
constructor (props) {
super(props);
this.state = {
blablabla:"ex"
}
this.onCheckChange=this.onCheckChange.bind(this)
}
onCheckChange(e){
console.log(e.target.checked)
this.setState({
[e.target.name]:e.target.checked
})
}
onSubmitChecklistClicked = async (Id) => {
var response = await RequestHandler(`${ENVIRONMENT.API_URL}api/v1.0/checklist`, {}, {Id})
console.log(response);
}
render () {
return(
<Input type="checkbox" className="input-checked"
checked={data.checklist}
onChange={this.onCheckChange,() => this.onSubmitChecklistClicked(data.Id)}></Input>
)
}
}
for the first time, the checklist is checked or unchecked is based the JSON given by database,
I dont know which one is my problem, at the onCheckChange function or checked{} attribute, or onChange{} attribute.
答案1
得分: 0
为了使检查表发生变化，您需要将checked属性设置为状态中的一个变量。这样，当您执行setState时，组件将重新渲染，这次输入的checked属性将被设置为false。
示例代码如下：
class Apps extends React.Component {
constructor(props) {
super(props);
this.state = {
isChecked: false, // 或者根据您的需求设置为true
// ...
};
this.onCheckChange = this.onCheckChange.bind(this);
}
onCheckChange(e) {
console.log(e.target.checked);
this.setState({
isChecked: e.target.checked, // 在状态中设置变量
});
}
onSubmitChecklistClicked = async (Id) => {
var response = await RequestHandler(`${ENVIRONMENT.API_URL}api/v1.0/checklist`, {}, { Id });
console.log(response);
};
render() {
return (
<Input
type="checkbox"
className="input-checked"
checked={this.state.isChecked} // 在这里使用
onChange={this.onCheckChange, () => this.onSubmitChecklistClicked(data.Id)}
></Input>
);
}
}
英文:
In order for the checklist to change you have to set the checked prop to a variable in your state. This way, when you do setState the component will render again and this time checked prop of the input would be set to false.
Example code would be such
class Apps extends React.Component {
constructor (props) {
super(props);
this.state = {
isChecked: false, // or true depending on what you want
...
}
this.onCheckChange=this.onCheckChange.bind(this)
}
onCheckChange(e){
console.log(e.target.checked)
this.setState({
isChecked: e.target.checked // set the variable in the state
})
}
onSubmitChecklistClicked = async (Id) => {
var response = await RequestHandler(`${ENVIRONMENT.API_URL}api/v1.0/checklist`, {}, {Id})
console.log(response);
}
render () {
return(
<Input type="checkbox" className="input-checked"
checked={this.state.isChecked} // use it here
onChange={this.onCheckChange,() => this.onSubmitChecklistClicked(data.Id)}></Input>
)
}
}
专注分享java语言的经验与见解，让所有开发者获益！
评论