input react 表单

input 密码框在谷歌浏览器下 会有黄色填充 官网的不太用，这个比较好用

type="password" autoComplete="new-password"

HTML

index.jsx

import React, { Component } from 'react';

import { NavLink} from 'react-router-dom';

// import Checkbox from './checkbox.jsx';

// import AllCheck from './allcheck.jsx';

// import All from './all.jsx';

import All1 from './all1.jsx';

class View extends Component{

    constructor(props){

        super(props);

        this.state = {

            name:'',

            year:'',

            comp:'',

            exp:{

                year:'',

                comp:'',

                job:'',

            },

            resume:{

                base:{

                    name:'',

                    age:'',

                    genders:'male'

                },

                exp:{

                    year:'',

                    comp:'',

                    job:'',

                    detail:'',

                    area:'lime'

                }

            }

        }

    }

    // 单个input

    handleChange(e){

        // 获取 input 元素上的value

        let value = e.target.value;

        this.setState({

            name:value

        })

    }

    // 多个input

    _handleChange(e){

        // 获取 input 元素上的value

        let name = e.target.name;

        let value = e.target.value;

        this.setState({

            [name]:value

        })

    }

    // 多个input exp

    __handleChange(e){

        // 获取 input 元素上的value

        let name = e.target.name;

        let value = e.target.value;

        const exp = this.state.exp;

        // year exp.year = value

        // comp exp.comp = value

        // job exp.job = value

        exp[name] = value;

        this.setState({exp})

    }

    // 多个input exp

    ___handleChange(e){

        // 获取 input 元素上的value

        let name = e.target.name;

        let value = e.target.value;

        const resume = this.state.resume;

        const namekey = e.target.getAttribute('namekey');

        // resume.base.name = name;

        // resume.base.age = age;

        // resume.exp.job = job;

        resume[namekey][name] = value;

        this.setState({resume})

        /**

            第一步

                设置state 默认值

            第二步

                写jsx 中 input

                    value

                    onChange

                如果多input 或深层次

                    增加name属性

                如果多个input 较深层次

                    除了 增加默认的name 还需自定义一个namekey

            第三步

                在onChange 方法中定义setState

            SP

                对象的[]用法与场景

            作业

            1、实现checkbox

            2、正选 反选

        **/

    }

    render(){

        return (

            <div className="input_con">

                <NavLink to="/">首页</NavLink><br/>

                <NavLink to="/input">表单</NavLink><br/>

                <NavLink to="/event">事件</NavLink><br/>

                <NavLink to="/tab">tab</NavLink>

                <h2>input 表单课</h2>

                <ul>

                    <li>用户名：{this.state.name}</li>

                    <li>

                        <label>用户名</label>

                        <div className="lable_ctrl">

                            <input type="text" value={this.state.name}

                            placeholder="请输入用户名" onChange={(e)=>this.handleChange(e)}/>

                        </div>

                    </li>

                </ul>

                <ul>

                    <li>工作年限：{this.state.year}</li>

                    <li>

                        <label>工作年限</label>

                        <div className="lable_ctrl">

                            <input type="text" name="year" value={this.state.year}

                            placeholder="请输入工作年限" onChange={(e)=>this._handleChange(e)}/>

                        </div>

                    </li>

                    <li>公司名称：{this.state.comp}</li>

                    <li>

                        <label>公司名称</label>

                        <div className="lable_ctrl">

                            <input type="text" name="comp" value={this.state.comp}

                            placeholder="请输入公司名称" onChange={(e)=>this._handleChange(e)}/>

                        </div>

                    </li>

                </ul>

                <ul>

                    <li>工作年限：{this.state.exp.year}</li>

                    <li>

                        <label>工作年限</label>

                        <div className="lable_ctrl">

                            <input type="text" name="year" value={this.state.exp.year}

                            placeholder="请输入工作年限" onChange={(e)=>this.__handleChange(e)}/>

                        </div>

                    </li>

                    <li>工作年限：{this.state.exp.comp}</li>

                    <li>

                        <label>公司名称</label>

                        <div className="lable_ctrl">

                            <input type="text" name="comp" value={this.state.exp.comp}

                            placeholder="请输入公司名称" onChange={(e)=>this.__handleChange(e)}/>

                        </div>

                    </li>

                    <li>工作职责：{this.state.exp.job}</li>

                    <li>

                        <label>工作职责</label>

                        <div className="lable_ctrl">

                            <input type="text" name="job" value={this.state.exp.job}

                            placeholder="请输入工作职责" onChange={(e)=>this.__handleChange(e)}/>

                        </div>

                    </li>

                </ul>

                <h2>resume</h2>

                <ul>

                    <li>姓名：{this.state.resume.base.name}</li>

                    <li>

                        <label>姓名</label>

                        <div className="lable_ctrl">

                            <input type="text" name="name" namekey="base" value={this.state.resume.base.name}

                            placeholder="请输入姓名" onChange={(e)=>this.___handleChange(e)}/>

                        </div>

                    </li>

                    <li>年龄：{this.state.resume.base.age}</li>

                    <li>

                        <label>年龄</label>

                        <div className="lable_ctrl">

                            <input type="text" name="age" namekey="base" value={this.state.resume.base.age}

                            placeholder="请输入年龄" onChange={(e)=>this.___handleChange(e)}/>

                        </div>

                    </li>

                    <li>工作职责：{this.state.resume.exp.job}</li>

                    <li>

                        <label>工作职责</label>

                        <div className="lable_ctrl">

                            <input type="text" name="job" namekey="exp" value={this.state.resume.exp.job}

                            placeholder="请输入工作职责" onChange={(e)=>this.___handleChange(e)}/>

                        </div>

                    </li>

                    <li>工作详情：{this.state.resume.exp.detail}</li>

                    <li>

                        <label>工作详情</label>

                        <div className="lable_ctrl">

                            <textarea name="detail" namekey="exp" value={this.state.resume.exp.detail} onChange={(e)=>this.___handleChange(e)}></textarea>

                        </div>

                    </li>

                    <li>手机号的区号：{this.state.resume.exp.area}</li>

                    <li>

                        <label>手机号的区号</label>

                        <div className="lable_ctrl">

                            <select name="area" namekey="exp" defaultValue={this.state.resume.exp.area} onChange={(e)=>this.___handleChange(e)}>

                                <option value="grapefruit">葡萄柚</option>

                                <option value="lime">酸橙</option>

                                <option value="coconut">椰子</option>

                                <option value="mango">芒果</option>

                            </select>

                        </div>

                    </li>

                    <li>性别：{this.state.resume.base.genders}</li>

                    <li>

                        <label>性别</label>

                        <div className="lable_ctrl">

                            <label>男<input type="radio" name="genders" namekey="base" value="male" onClick={(e)=>this.___handleChange(e)} defaultChecked={this.state.resume.base.genders==='male'}/></label>

                            <label htmlFor="gender">女</label><input name="genders" namekey="base" value="female" id="gender" type="radio" defaultChecked={this.state.resume.base.genders==='female'} onClick={(e)=>this.___handleChange(e)}/>

                        </div>

                    </li>

                </ul>

                <All1/>

            </div>

        )

    }

}

export default View;

React JSX

all1.jsx

import React , { Component } from 'react';

class View extends Component {

    constructor(props){

        super(props);

        this.state =  {

            isGoing:false,

            checkNode:[

                {checked:false,name:"Vue"},

                {checked:false,name:"React"},

                {checked:false,name:"Angular"},

                {checked:false,name:"Ember"},

                {checked:false,name:"Omi"},

            ]

        }

    }

    handleInputChange(e){

        let checked = e.target.checked;

        let name = e.target.name;

        if(checked){

            this.state.checkNode.forEach(v=>{

                v.checked = true;

            })

        }else {

            const obj = this.state.checkNode;

            for(let index in obj){

                obj[index].checked = false;

            }

        }

        this.setState({

            [name]:checked

        })

    }

    handleChange(e,key){

        const checkNode = this.state.checkNode;

        checkNode[key].checked = !checkNode[key].checked

        // this.state.checkNode[0].checked

        let bTrue = true;

        for(let i=0,len=checkNode.length;i<len;i++){

            if(!checkNode[i].checked){

                bTrue = false;

                break;

            }

        }

        this.setState({

            isGoing:bTrue,

            checkNode

        })

    }

    render(){

        // console.log(this.state.isGoing)

        const checkList = this.state.checkNode.map((val,key)=>(

            <p key={key}>

                <input type="checkbox"

                    checked={val.checked}

                    onChange={(e)=>this.handleChange(e,key)}

                />

                <label>{val.name}</label>

            </p>

        ))

        return(

            <div>

                <h2>今天要讲checkbox 的demo</h2>

                <input

                name="isGoing"

                type="checkbox"

                checked={this.state.isGoing}

                onChange={(e)=>this.handleInputChange(e)} />

                {checkList}

            </div>

        )

    }

}

export default View;