如何发布复选框值和选中状态

IT技术 reactjs
2021-05-08 02:57:15

我正在获取复选框值、选中状态、复选框标签、复选框课程 ID。使用爱可信方法的服务器.....现在我要发送回选中的复选框值，并使用爱可信方法...可以在其中任何一个帮助检查status..to后端... 响应控制台 。

我无法在响应控制台中执行和打印...请任何人帮忙

    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;
1个回答

使用表单提交事件来定位复选框名称，这会生成 HTMLElement 节点列表。将它们转换为数组并使用输入id和checked属性映射到键值对列表。Object.fromEntries将此数组转换为对象。

现在的问题是，POST 请求的数据需要采用什么格式？

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)
    })
};

编辑表单提交获取复选框值

编辑

我看到您还将checkBoxSubmit回调附加到按钮的 onClick 处理程序与表单的 onSubmit 处理程序。这意味着处理程序正在接收来自按钮的点击事件而不是来自表单的提交事件。

<Button type="submit" onClick={this.checkBoxSubmit}>Save</Button>

应将处理程序移动到窗体

<form onSubmit={this.checkBoxSubmit}>
其它你可能感兴趣的问题
上一篇Ender 3 Pro 在主板和 BLTouch 升级后无法正确自动归位 下一篇在 Autodesk 最近的许可更改生效后，我是否仍能将我的 Fusion 360 模型导出到其他 CAD 软件包？