​

                   
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;
 

​