react Input 表单

​

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;

​