效果下如图：
我们通过react脚手架来实现
先来看一下项目逻辑：
表单控制基本元素：
text、password、checkbox、radio、select、option、textarea
MVVM：双向数据绑定 （ Model -> view view -> Model ）
Model:模型（模块）
View : 视图
react:数据流是单向：
Model → View
App.js代码如下：
import React from 'react'; //引入脚手架
class App extends React.Component { //创建App组件
state = { //state里面存放数据
name: '',
sex: '0', //0表示女 1表示男
hobby: [
{
title: 'rap',
checked: true
},
{
title: '篮球',
checked: false
},
{
title: '唱歌',
checked: false
},
{
title: '跳舞',
checked: false
},
],
city: [
"成都",
"南宁",
"广州",
"武汉"
],
defaultCity: '成都'
}
//输入姓名触发
handleChange = (e) => {
this.setState({
name: e.target.value
})
}
//表单在数据交互方面起来很重要的一部分，离不开form标签；
//点击提交表单submit触发form标签的handleSubmit 事件
handleSubmit = (e) => {
e.preventDefault() //阻止表单提交默认事件
console.log(
'表单提交数据为：',
this.state.name,
this.state.sex,
this.state.hobby,
this.state.defaultCity
)
}
//选择城市触发的默认事件
handleSelect = (e) => {
this.setState({
defaultCity: e.target.value
})
}
//性别单选框
handleSex = (e) => {
this.setState({
sex: e.target.value
})
}
//爱好选择栏触发
handleHobby = (index) => {
const hobby = this.state.hobby;
hobby[index].checked = !hobby[index].checked;
this.setState({
hobby
})
}
render() {
return (
<div>
<h2> 表单控制 </h2>
<form onSubmit={this.handleSubmit}>
姓名：
<input
type='text'
defaultValue={this.state.val}
onChange={this.handleChange} />
<br />
性别：
<input
type='radio'
value={'0'}
defaultChecked={this.state.sex === '0'}
name='sex'
onChange={this.handleSex}/>
女
<input
type='radio'
value={'1'}
defaultChecked={this.state.sex === '1'}
name='sex'
onChange={this.handleSex}/>
男
<br />
爱好：(遍历出来的)
{
this.state.hobby.map((item, index) => {
return (
<div key={index} >
<input
type="checkbox"
defaultChecked={item.checked}
onChange={this.handleHobby.bind(this, index)}
/> {item.title}
</div>
)
})
}
<br />
城市：
{
/*
<select name="" id="">
<option> 成都 </option>
<option> 南宁 </option>
<option> 广州 </option>
<option> 武汉 </option>
</select>
*/
}
{
this.state.city.length > 0 && (
<select value={this.state.defaultCity} onChange={this.handleSelect}>
{
this.state.city.map((item, index) => {
return (
<option key={index}>{item}</option>
)
})
}
</select>
)
}
<br />
<input type="submit" />
</form>
</div>
);
}
}
export default App;
index.js代码如下：
import React from 'react'; //引入react脚手架
import ReactDOM from 'react-dom'; //引入react-dom
import App from './App';//引入App组件
//将App组件挂载到index.html内的id=root的标签中
ReactDOM.render(
<App />,
document.getElementById('root')
);
index.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>表单控件</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<!-- 数据就是挂载在这里面 之后渲染到页面上的 -->
<div id="root"></div>
</body>
</html>