一、搭建项目
1. 安装脚手架工具 （单文件组件项目生成工具）（只需要安装一次）
npm install -g create-react-app / cnpm install -g create-react-app
2. 创建项目
找到项目要创建的目录
D:\wamp\www\react\study\reactdemo
create-react-app reactdemo
3. 一些基础知识
import React, { Component } from 'react';
import '../assets/css/one.css'
// 1、所有的模板要被一个根节点包含起来
// 2、模板元素不要加引号
// 3、{}绑定数据
// 4、绑定属性注意：
// class 要变成 className
// for 要变成 htmlFor
// style属性和以前的写法有些不一样
// <div style={{'color':'blue'}}>{this.state.title}</div>
// <div style={{'color':this.state.color}}>{this.state.title}</div>
class One extends Component{
// 数据
constructor(){
super() // 继承Component
// react 定义数据
this.person={
name: '张三',
title: 'i am title',
fontColor: 'font-red',
fontStyle: {
color: 'yellow',
fontSize: '40px'
}
}
}
render(){
return (
<div>
<hr/>
<p>我是p标签</p>
<p>我是p标签</p>
one组件
<p>react 组件里面的所有节点要被根节点包含</p>
<p>{this.person.name}</p>
<div title={this.person.title}>i am div</div>
<div className='font-red'>我是红色的DIV</div>
<div className={this.person.fontColor}>我是红色的DIV 111</div>
<label htmlFor='name'>姓名：</label>
<input id='name'></input>
<div style={{'marginTop': '30px'}}>我是行内样式</div>
<div style={this.person.fontStyle}>我是行内样式</div>
</div>
)
}
}
export default One;
4. 表单、数据 事件
import React, { Component } from 'react';
class FourEventrefdata extends Component{
// 数据
constructor(){
super() // 继承Component
// react 定义数据
this.state={
name: '我是FourEventrefdata组件',
inputValue: 'inputValue'
}
}
run=(event)=>{
console.log(event)
alert(event.target) /*获取执行事件的dom节点*/
event.target.style.background='red'
// 获取dom属性
alert(event.target.getAttribute('gem'))
}
inputChange=(e)=>{
console.log(e.target.value)
this.setState({
inputValue: e.target.value
})
}
getInputValue=()=>{
alert(this.state.inputValue)
}
getInputValue2=()=>{
alert(this.refs.inputDom.value)
}
gemKeyUp=(e)=>{
alert(e.keyCode)
}
render(){
return (
<div>
<hr/>
<h1>{this.state.name}</h1>
<p>05 React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定</p>
<p>表单事件</p>
{/* 05--1 事件对象： 在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有与事件有关的信息*/}
<button gem='123' onClick={this.run}>click事件</button>
<br/><br/><br/>
{/* 05--2 表单事件 获取表单的值:
1. 监听表单的改变事件
2. 把表单输入的值赋予给inputValue
3. 点击按钮的时候获取state里面的inputValue
*/}
<p>表单事件</p>
<input onChange={this.inputChange}/><button onClick={this.getInputValue}>获取input的值</button>
<p>{this.state.inputValue}</p>
{/* 05--2 表单事件 获取表单的值:
1. ref 获取值
2. 把表单输入的值赋予给inputValue
3. 点击按钮的时候获取state里面的inputValue
*/}
<input ref="inputDom"/><button onClick={this.getInputValue2}>获取input的值</button>
<br/>
<p>键盘事件</p>
{/* 05--3 键盘事件 */}
<input onKeyUp={this.gemKeyUp}></input>
<br/><br/><br/><br/>
</div>
)
}
}
export default FourEventrefdata;
5. 双向数据绑定
import React, { Component } from 'react';
class FiveTwowayDataBind extends Component{
// 数据
constructor(){
super() // 继承Component
// react 定义数据
this.state={
name: '双向数据绑定',
age: 18
}
}
inputChange=(e)=>{
this.setState({
age: e.target.value
})
}
setGemAge=(e)=>{
this.setState({
age: 12
})
}
render(){
return (
<div>
<h1>{this.state.name}</h1>
{/*数据双向邦定: model 改变影响view view改变影响model*/}
<input value={this.state.age} onChange={this.inputChange}/>
<input defaultValue={this.state.age}/>
<p>{this.state.age}</p>
<button onClick={this.setGemAge}>改变age的值</button>
<br/><br/><br/><br/>
</div>
)
}
}
export default FiveTwowayDataBind;
6.
import React, { Component } from 'react';
class SixFormDetail extends Component{
// 数据
constructor(){
super() // 继承Component
// react 定义数据
this.state={
name: 'react表单详解',
age: 18,
sex: '1',
realCity: '广州',
citys: ['北京', '广州'],
hobby: [
{
'title': '运动',
'checked': true
},
{
'title': '购物',
'checked': true
}
],
info: 'i love guangzhou'
}
}
handleAge=(e)=>{
this.setState({
age: e.target.value
})
}
handleSubmit=(e)=>{
// 阻止submit提交事件
e.preventDefault()
// alert(this.state.age + this.state.sex + 'realCity:' + this.state.realCity + '爱好' + this.state.hobby + this.state.info)
console.log(this.state.hobby)
}
handleSex=(e)=>{
this.setState({
sex: e.target.value
})
}
handleCity=(e)=>{
this.setState({
realCity: e.target.value
})
}
handleHobby=(key)=>{
let realHobby = this.state.hobby
realHobby[key].checked = !realHobby[key].checked
this.setState({
hobby: realHobby
})
}
handleInfo=(e)=>{
this.setState({
info: e.target.value
})
}
render(){
return (
<div>
<h1>{this.state.name}</h1>
<form onSubmit={this.handleSubmit}>
用户名：<input type='text' value={this.state.age} onChange={this.handleAge}/><br/><br/>
{/* 监听表单事件，必须监听onChange事件 */}
男<input type='radio' value="1" checked={this.state.sex==='1'} onChange={this.handleSex}/>
女<input type='radio' value="2" checked={this.state.sex==="2"} onChange={this.handleSex}/><br/><br/>
居住城市：
<select value={this.state.realCity} onChange={this.handleCity}>
{
this.state.citys.map((item, key)=>{
return <option key={key}>{item}</option>
})
}
</select><br/><br/>
爱好：
{
this.state.hobby.map((item, key)=>{
return(
<span key={key}>
<input type="checkbox" checked={item.checked} onChange={this.handleHobby.bind(this,key)}/>{item.title}
</span>
)
})
}
个人签名：
<textarea value={this.state.info} onChange={this.handleInfo}/>
<input type='submit' defaultValue="提交"/><br/>
</form>
<br/><br/><br/><br/>
</div>
)
}
}
export default SixFormDetail;
## 第17节：React高级-PropTypes校验传递值
import React, { Component } from 'react';
import PropTypes from 'prop-types'
class SevenProTypes extends Component {
state = { }
render() {
return (
<div onClick={this.handleClick}>
{this.props.content}
</div>
);
}
handleClick=() => {
this.props.deleteItem(this.props.index)
}
}
SevenProTypes.propTypes={
content: PropTypes.string,
deleteItem: PropTypes.func,
index: PropTypes.number
}
export default SevenProTypes;
网友评论