react复选框放置方法

Question

我是新手，在创建一个函数时遇到了问题，该函数会在表中选中复选框时触发，因此该函数会获取表id并通过put更新该字段，然后再次更新屏幕。

你是怎么做到的？

import React from 'react'
import Main from '../template/main'
import axios from 'axios'
const headerProps = {
icon: 'users',
title: 'Controle Presença Alunos',
}
const baseUrl = 'http://localhost:8000/Presenca/'
const initState = {
user: {
id: '',
Aluno_nome: '',
Aula_descricao: '',
status: '',
Alunos: '',
Aulas: ''
},
list: []
}
export default class Aluno_presenca extends React.Component {
state = { ...initState
}
/**Chamada quando o elemento for exibido na tela */
async componentDidMount() {
axios.get(baseUrl, {
crossdomain: true
})
.then(resp => {
this.setState({
list: resp.data
}) /**salvamos dentro da lista as requisições */
})
}

**tente criar esse motodo para salvar mas preciso pega os valores do estado atual**
update() {
axios.put(`${baseUrl}/${user.id}`, {
id: 314,
Aluno_nome: 'Jose',
Aula_descricao: 'história',
status: 'True',
Alunos: 1,
Aulas: 1
})
.then(function(response) {

this.componentDidMount
});
}

renderForm() {
/**jsx que ira renderizar o formulário */
return ( <
div >

<
/div>
);
}

/**edição */
load(user) {
this.setState({
user
}) /**atualiza o estado da aplicação. */
}
remove(user) {
axios.delete(`${baseUrl}/${user.id}`)
.then(resp => {
const list = this.state.list.filter(u => u !== user)
this.setState({
list
})
})
}

/**list users */
rendertable() {
return ( <
table className = "table mt-4" >
<
thead >
<
tr >
<
th > ID < /th> <
th > NOME < /th> <
th > Materia < /th> <
th > Presenca < /th> <
th > aluno < /th> <
th > aula < /th> < /
tr > <
/thead> <
tbody > {
this.renderows()
} <
/tbody>             < /
table >
);
}

checked = e => {
const checked = e.target.checked;
const name = e.target.name;
this.setState({
[name]: checked
});
};

renderows() {
/**mapeando dados que estão no estado do objeto */
return this.state.list.map((user, index) => {
return ( <
tr key = {
index
} >
<
td > {
user.id
} < /td> <
td > {
user.Aluno_nome
} < /td> <
td > {
user.Aula_descricao
} < /td> <
td >
<
input type = "checkbox"
id = {
user.id
}
name = "elem"
checked = {
this.state.checked
}
onChange = {
this.save_click
}

/> {
String(this.state.checked)
}
<
/td> <
td > {
user.Aluno
} < /td> <
td > {
user.Aulas
} < /td> < /
tr >
);
})
}

render() {
return ( <
Main { ...headerProps
} >
{
this.renderForm()
} {
this.rendertable()
}
<
/Main>
);
}
}

Answer 1

我创建了save_click方法

save_click(
)
{axios.put(`${baseUrl}352/`, {  id :352, Aluno_nome: 'Matheus', Aula_descricao: 'história', status: 'False', Alunos: 1,Aulas:1 })
.then(resp => {
console.log('salvo com sucesso')
console.log(resp.data)

});  }


my biggest difficulty is getting passes the parameters in the save_click. Passing fixed value is working normally.
<input type="checkbox" 

id={user.id}

name="elem"
value={user.status }
onChange={this.save_click}
/>

renderows(){
*mapping data that is in the state of the object
return this.state.list.map((user,index) => {
return (                
<tr key={index}>
<td>{user.id}</td>
<td>{user.Aluno_nome}</td>
<td>{user.Aula_descricao}</td>
<td>
<input type="checkbox" 

id={user.id}

name="elem"
value={user.status }
onChange={this.save_click}



/>


</td>
<td>{user.Aluno}</td>
<td>{user.Aulas}</td>
</tr>
);
})
}

在此处输入图像描述

Answer 2

好吧，所以首先，试着使用更漂亮的或任何代码格式化程序，我很难阅读你的代码，因为我无法理解你的代码。我会告诉你如何从头开始：

在复选框中，添加一个在调用onChange事件时触发的函数，该函数应该在您想要的任何地方使用发送put请求，然后发送get请求以获取新数据，并调用更新的数据并对其执行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)
});