如何发布复选框值和选中状态
[英] how to post check box value and checked status
本文介绍了如何发布复选框值和选中状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在获取复选框值、选中状态、复选框标签、复选框课程 ID.从使用 axios 方法的服务器.....现在我想将选中的复选框值和选中的状态发送回使用 axios 方法的后端...任何人都可以帮助解决这些问题....
我无法在响应控制台中执行和打印...请任何人帮忙
import React, { Component } from 'react';从'react-bootstrap/Row'导入行；从 'react-bootstrap/Col' 导入 Col；从反应引导/按钮"导入按钮从@material-ui/core"导入 { List, ListItem };从@material-ui/core/Checkbox"导入复选框；从@material-ui/core/FormGroup"导入FormGroup；从@material-ui/core/FormControlLabel"导入FormControlLabel；从 'axios' 导入 Axios类 TwelvethCollegeCourses 扩展组件 {构造函数(道具){超级(道具)this.state = {复选框:[]，}}componentDidMount() {axios.get('http://127.0.0.1:8000/checkboxapi/checkbox/').then(响应 => {this.setState({ checkboxes: response.data })控制台日志(响应数据)}).catch(错误=> {控制台日志(错误)})}ChangeCheckBox = (e) =>{//onchange 代码复选框};checkBoxSubmit = e =>{e.preventDefault();axios.post('http://127.0.0.1:8000/checkboxapi/user/').then(响应 => {}).catch(错误=> {控制台日志(错误)})};使成为() {const { 复选框} = this.state返回 (<div><容器流体><Row className="college-courses-row"><Col sm={4} className="courses-box-college-courses-selected"><div className="main-boxes"><div className="course-collge-regis-index-boxes"><div className="scrolling-data check-boxex-list"><表格><FormGroup aria-label="position" row><List className="courses-college-regis">{checkboxes.map((checkbox, key) => (<ListItem button key={key}><表单控件标签标签={checkbox.CourseLabel}类型=复选框"id={checkbox.CourseId}名称=中级"值={checkbox.CourseValue}control={<Checkbox color="primary"/>}onChange={this.ChangeCheckBox}选中={checkbox.checked}/></ListItem>))}</列表></FormGroup></表单>
</Col><Col sm={8}><div className="total-number-courses-save-box "><Button type="submit" onClick={this.checkBoxSubmit}>保存</Button>
</Col></行></容器流体></div >)}}导出默认的第十二大学课程；
解决方案
使用表单提交事件来定位复选框名称，从而生成 HTMLElement 节点列表.将它们转换为数组并使用输入的 id 和 checked 属性映射到键值对列表.Object.fromEntries 将此数组转换为对象.
现在的问题是，POST 请求的数据需要采用什么格式?
checkBoxSubmit = e =>{e.preventDefault();const checkValues = Array.from(e.target.intermediatecourse).map(el => [el.id,el.checked]);//现在有 id 检查的键值对对象//根据 POST 请求端点的需要过滤/格式化//JSON.stringify 并放置在请求正文中axios.post('http://127.0.0.1:8000/checkboxapi/user/').then(响应 => {}).catch(错误=> {控制台日志(错误)})};
编辑
我看到您还将 checkBoxSubmit 回调附加到按钮的 onClick 处理程序与表单的 onSubmit 处理程序.这意味着处理程序正在接收来自按钮的点击事件，而不是来自表单的提交事件.
<Button type="submit" onClick={this.checkBoxSubmit}>保存</Button>
应将处理程序移动到窗体
i am getting checkbox values , checked status, checkbox label, checkbox courseid. from the server using of axios method.....now i want to send back checked of checkbox value and checked status..to back end using axios method...
can any one help on these....
i am unable to do and print in console of response...please any one help
import React, { Component } from 'react';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button'
import { List, ListItem } from '@material-ui/core';
import Checkbox from "@material-ui/core/Checkbox";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Axios from 'axios'
class TwelvethCollegeCourses extends Component {
constructor(props) {
super(props)
this.state = {
checkboxes: [],
}
}
componentDidMount() {
Axios.get('http://127.0.0.1:8000/checkboxapi/checkbox/')
.then(response => {
this.setState({ checkboxes: response.data })
console.log(response.data)
})
.catch(error => {
console.log(error)
})
}
ChangeCheckBox = (e) => {
// onchange code checkbox
};
checkBoxSubmit = e => {
e.preventDefault();
Axios.post('http://127.0.0.1:8000/checkboxapi/user/')
.then(response => {
})
.catch(error => {
console.log(error)
})
};
render() {
const { checkboxes } = this.state
return (
<div>
<Container-Fluid>
<Row className="college-courses-row">
<Col sm={4} className="courses-box-college-courses-selected">
<div className="main-boxes">
<div className="course-collge-regis-index-boxes">
<div className="scrolling-data check-boxex-list">
<form>
<FormGroup aria-label="position" row>
<List className="courses-college-regis">
{checkboxes.map((checkbox, key) => (
<ListItem button key={key}>
<FormControlLabel
label={checkbox.CourseLabel}
type="checkbox"
id={checkbox.CourseId}
name="intermediatecourse"
value={checkbox.CourseValue}
control={<Checkbox color="primary" />}
onChange={this.ChangeCheckBox}
checked={checkbox.checked}
/>
</ListItem>
))}
</List>
</FormGroup>
</form>
</div>
</div>
</div>
</Col>
<Col sm={8}>
<div className="total-number-courses-save-box ">
<Button type="submit" onClick={this.checkBoxSubmit}>Save</Button>
</div>
</Col>
</Row>
</Container-Fluid>
</div >
)
}
}
export default TwelvethCollegeCourses;
解决方案
Use the form submit event to target the checkbox name, which yields a list of HTMLElement nodes. Convert them to an array and map into a list of key-value pairs using the input id and checked properties. Object.fromEntries converts this array into an Object.
The question now is, what format does your data need to be in for the POST request?
checkBoxSubmit = e => {
e.preventDefault();
const checkedValues = Array.from(e.target.intermediatecourse).map(el => [
el.id,
el.checked
]);
// now have object of id-checked key-value pairs
// filter/format accordingly for POST request endpoint needs
// JSON.stringify and place in body of request
Axios.post('http://127.0.0.1:8000/checkboxapi/user/')
.then(response => {
})
.catch(error => {
console.log(error)
})
};
EDIT
I see you've also attached the checkBoxSubmit callback to the button's onClick handler versus the form's onSubmit handler. This means the handler is receiving a click event from the button instead of a submit event from the form.
<Button type="submit" onClick={this.checkBoxSubmit}>Save</Button>
Should move handler to form
<form onSubmit={this.checkBoxSubmit}>
这篇关于如何发布复选框值和选中状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
