Javascript 反应复选框放置方法

Javascript 反应复选框放置方法,javascript,reactjs,api,Javascript,Reactjs,Api,我是个新手,在创建一个函数时遇到了问题,当选中表中的复选框时,该函数将启动,因此该函数将获取表id并通过put更新该字段,然后再次更新屏幕 你是怎么做到的 从“React”导入React 从“../template/Main”导入Main 从“axios”导入axios const headerProps={ 图标:“用户”, 标题:“控制当前状态”, } 常量baseUrl=http://localhost:8000/Presenca/' 常量initState={ 用户:{ id:“”,

我是个新手,在创建一个函数时遇到了问题,当选中表中的复选框时,该函数将启动,因此该函数将获取表id并通过put更新该字段,然后再次更新屏幕

你是怎么做到的

从“React”导入React
从“../template/Main”导入Main
从“axios”导入axios
const headerProps={
图标:“用户”,
标题:“控制当前状态”,
}
常量baseUrl=http://localhost:8000/Presenca/'
常量initState={
用户:{
id:“”,
Aluno_nome:“,
Aula_描述:'',
状态:“”,
阿鲁诺斯:“,
奥拉斯:''
},
名单:[]
}
导出默认类Aluno\u presenca扩展React.Component{
state={…initState
}
/**为exibido na tela设计的Chamada quando o elemento*/
异步组件didmount(){
获取(baseUrl{
跨域:对
})
。然后(resp=>{
这是我的国家({
列表:响应数据
})/**salvamos dentro da lista根据需要*/
})
}
**这是一个很好的例子**
更新(){
axios.put(`${baseUrl}/${user.id}`{
身份证号码:314,
Aluno_nome:“Jose”,
Aula_描述:“历史”,
状态:“True”,
阿鲁诺斯:1,
奥拉斯:1
})
.然后(功能(响应){
这个组件安装了
});
}
renderForm(){
/**jsx que ira renderizar o formulário*/
报税表(<
div>
<
/div>
);
}
/**埃迪昂*/
加载(用户){
这是我的国家({
用户
})/**atualiza o estado da aplicação*/
}
删除(用户){
delete(`${baseUrl}/${user.id}`)
。然后(resp=>{
const list=this.state.list.filter(u=>u!==user)
这是我的国家({
列表
})
})
}
/**列出用户*/
可渲染的(){
报税表(<
表className=“表mt-4”>
<
thead>
<
tr>
<
th>ID<
th>NOME<
材料<
th>Presenca<
th>aluno<
奥拉/
tr><
/thead><
t车身>{
this.renderrows()
} <
/t正文>
);
}
选中=e=>{
const checked=e.target.checked;
const name=e.target.name;
这是我的国家({
[姓名]:选中
});
};
renderrows(){
/**马皮安多·达多斯·克斯多诺·埃斯塔多·奥布杰托(mapeando dados que estão estado do objeto)*/
返回此.state.list.map((用户,索引)=>{
报税表(<
tr键={
指数
} >
<
td>{
用户id
}<
td>{
user.Aluno_nome
}<
td>{
user.Aula_descripcao
}<
td>
<
输入类型=“复选框”
id={
用户id
}
name=“elem”
选中={
这个州已经检查过了
}
onChange={
请单击“保存”
}
/> {
字符串(this.state.checked)
}
<
/td><
td>{
用户:Aluno
}<
td>{
用户:Aulas
}
);
})
}
render(){
报税表(<
主{…头柱
} >
{
this.renderForm()
} {
this.renderable()
}
<
/Main>
);
}

}
好的,首先,尝试使用Pretter或任何代码格式化程序,因为我无法理解您的代码,所以我很难尝试阅读您的代码,我将告诉您如何从头开始:

在复选框上,添加一个在调用onChange事件时激发的函数,该函数应使用send the put request where you want,然后发送get request以获取新数据并调用并使用更新的数据执行setState,这就是您所需要的

如果我有什么不对劲或者你有任何问题,请告诉我,乐意帮助:)

应该是这样的:

save_click(){
    axios.put(`${baseUrl}352/`, {
        id : this.state.id,
        Aluno_nome: this.state.Aluno_nome, 
        Aula_descricao: this.state.Aula_descricao, 
        status: this.state.status, 
        Alunos: this.state.Alunos,
        Aulas: this.state.Aulas
    })
    .then(resp => {
          console.log('salvo com sucesso')
          console.log(resp.data)
        });
甚至更容易

save_click(){
    axios.put(`${baseUrl}352/`, {...this.state})
    .then(resp => {
          console.log('salvo com sucesso')
          console.log(resp.data)
        });

我创建了save_click方法

save\u单击(
)
{axios.put(`${baseUrl}352/`,{id:352,Aluno_nome:'Matheus',Aula_descripcao:'história',status:'False',Alunos:1,Aulas:1})
。然后(resp=>{
console.log('salvo com successo')
控制台日志(响应数据)
});  }

我最大的困难是在save_click中获取参数。传递固定值正常工作。 renderrows(){ *映射处于对象状态的数据 返回此.state.list.map((用户,索引)=>{ 报税表( {user.id} {user.Aluno_nome} {user.Aula_descripcao} {user.Aluno} {user.Aulas} ); })
}
我最大的困难是在“保存”按钮中获取参数。通过定值正常工作,谢谢!你救了我的命。你到底有什么问题?你的问题不清楚。