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;