input表单

最新推荐文章于 2023-02-22 11:47:10 发布

web_wyh

最新推荐文章于 2023-02-22 11:47:10 发布

阅读量79

点赞数 1

文章标签： react

本文链接：https://blog.csdn.net/web_wyh/article/details/118891307

版权

这个React组件展示了如何管理多个输入字段的状态，包括个人基本信息、新用户信息以及简历详情。通过不同的事件处理函数，如_setValue和__setValue，实现了不同层级状态的更新。同时，代码中使用了componentDidMount生命周期方法，但未进行具体操作。

摘要由CSDN通过智能技术生成

import React, { Component } from 'react';

class View extends Component {
    constructor(props) {
        super(props);
        this.state = {
            uname: '',
            upwd: '',
            age: '',
            gender: '',
            cls: '',
            year: '',
            web1908: {
                uname: '',
                upwd: '',
            },
            web1906: {
                uname: '',
                upwd: '',
            },
            resume: {
                base: {
                    uname: '',
                    upwd: '',
                },
                exp: {
                    uname: '',
                    job: '',
                    year: ''
                },
                jiaoyu: {
                    uname: '',
                    year: ''
                }
            }
        }
    }
    _setValue(e) {
        let value = e.target.value;
        let name = e.target.name;
        const { web1908 } = this.state;
        web1908[name] = value;
        this.setState({ web1908 })
    }
    __setValue(e) {
        let value = e.target.value;
        let name = e.target.name;
        const { resume } = this.state;
        let namekey = e.target.getAttribute('namekey');
        resume[namekey][name] = value;
        this.setState({ resume })
    }
    componentDidMount() {
        const { uname,
            upwd,
            age,
            gender,
            cls,
            year,
        } = this.state;

    }
    setUnameValue(e) {
        let value = e.target.value;
        this.setState({
            uname: value
        })
    }
    setUpwdValue(e) {
        let value = e.target.value;
        this.setState({
            upwd: value
        })
    }
    setValue1(e, name) {
        let value = e.target.value;
        this.setState({
            [name]: value
        })
    }
    setValue(e) {
        let value = e.target.value;
        let name = e.target.name;
        this.setState({
            [name]: value
        })
    }
    render() {
        const { uname,
            upwd,
            age,
            gender,
            cls,
            year,
            web1908,
            resume
        } = this.state;
        console.log(resume)
        return (
            <div>
                <h3>input</h3>
                <ul>
                    <li>
                        <label htmlFor="test">用户名：{uname}</label>
                        <div className="label_ctrl pr">
                            <input id="test" type="input" value={uname}
                                onChange={(e) => { this.setUnameValue(e) }}
                            />
                            {/*<div className="tip pa"></div>*/}
                        </div>
                    </li>
                    <li>
                        <label>密<em style={{ visibility: 'hidden', }}>空</em>码：{upwd}</label>
                        <div className="label_ctrl pr">
                            <input type="password" value={upwd}
                                autoComplete="new-password"
                                onChange={(e) => { this.setUpwdValue(e) }}
                            />
                            {/*<div className="tip pa"></div>*/}
                        </div>
                    </li>
                    <li>
                        <label>年龄：{age}</label>
                        <div className="label_ctrl pr">
                            <input type="input" value={age}
                                onChange={(e) => { this.setValue1(e, 'age') }}
                            />
                            {/*<div className="tip pa"></div>*/}
                        </div>
                    </li>
                    <li>
                        <label>性别：{gender}</label>
                        <div className="label_ctrl pr">
                            <input type="input" value={gender}
                                onChange={(e) => { this.setValue1(e, 'gender') }}
                            />
                            {/*<div className="tip pa"></div>*/}
                        </div>
                    </li>
                    <li>
                        <label>班级：{cls}</label>
                        <div className="label_ctrl pr">
                            <input type="input" value={cls}
                                name="cls"
                                onChange={(e) => { this.setValue(e) }}
                            />
                            {/*<div className="tip pa"></div>*/}
                        </div>
                    </li>
                    <li>
                        <label>年份：{year}</label>
                        <div className="label_ctrl pr">
                            <input type="input" value={year}
                                name="year"
                                onChange={(e) => { this.setValue(e) }}
                            />
                            {/*<div className="tip pa"></div>*/}
                        </div>
                    </li>
                    <li>
                        <label>new用户名：{web1908.uname}</label>
                        <div className="label_ctrl pr">
                            <input type="input" value={web1908.uname}
                                name="uname"
                                onChange={(e) => { this._setValue(e) }}
                            />
                            {/*<div className="tip pa"></div>*/}
                        </div>
                    </li>
                    <li>
                        <label>new密码：{web1908.upwd}</label>
                        <div className="label_ctrl pr">
                            <input type="input" value={web1908.upwd}
                                name="upwd"
                                onChange={(e) => { this._setValue(e) }}
                            />
                            {/*<div className="tip pa"></div>*/}
                        </div>
                    </li>
                    <li>
                        <label>base下的用户名：{resume.base.uname}</label>
                        <div className="label_ctrl pr">
                            <input type="input" value={resume.base.uname}
                                name="uname"
                                namekey="base"
                                onChange={(e) => { this.__setValue(e) }}
                            />
                            {/*<div className="tip pa"></div>*/}
                        </div>
                    </li>
                    <li>
                        <label>exp下的用户名：{resume.exp.job}</label>
                        <div className="label_ctrl pr">
                            <input type="input" value={resume.exp.job}
                                name="job"
                                namekey="exp"
                                onChange={(e) => { this.__setValue(e) }}
                            />
                            {/*<div className="tip pa"></div>*/}
                        </div>
                    </li>
                </ul>
            </div>
        )
    }
}
export default View;