❤ React04-React 组件基础
1、组件化开发介绍
组件化开发思想:分而治之
异步组件-高阶组件
组件包含:
组件特点 可复用、独立、可组合
2、组件化创建的两种方式
(1)函数创建组件---无状态组件 使用JS函数(或者箭头函数)创建的组件 名称以答谢字母开头 函数必须有返回值,表示该组件的结构 渲染函数组件:用函数名作为组件标签名 可以是单标签或者双标签
(2)class创建组件---有状态组件
(3) 抽离为JS文件
导入和渲染
3、组件事件处理
1 事件绑定
2事件对象
3 有状态组件(类组件)和无状态组件(函数组件)
4 组件的state和setState
5 组件state
6 setState修改状态
7 从JSX之中抽离逻辑代码
事件绑定this指向的转换(三种)
(1) 箭头函数
箭头函数自身不绑定this
(2) Function.prototype.bind()
利用ES中的bind方法,将事件处理程序中的this与组件事例绑定到一起
(3) class的事例方法
8 表单绑定
受控组件
demo (输入框、文本框、富文本框、下拉框)
import React from 'react';
class Hrllo extends React.Component{
state = {
count:0,
txt:'11',
textarea:'富文本框',
city:'bg',
ischecked:false,
}
handleTxtx=e=>{
console.log('你刚刚点击了'+e.target);
this.setState({
txt:e.target.value,
})
console.log(this.state.txt)
}
handleTextarea=e=>{
console.log('你刚刚点击了'+e.target);
this.setState({
textarea:e.target.value,
})
console.log(this.state.textarea)
}
handleCity=e=>{
console.log('你刚刚点击了'+e.target);
this.setState({
city:e.target.value,
})
console.log(this.state.city)
}
handleChecked=e=>{
console.log('你刚刚点击了'+e.target);
this.setState({
ischecked:e.target.checked,
})
console.log(this.state.ischecked)
}
render() {
return (
<div>
{/* 输入框 */}
<div>
<input value={this.state.txt} name="txt"
onChange={this.handleTxtx}></input>
</div>
{/* 复选框 */}
<div>
<textarea value={this.state.textarea}
onChange={this.handleTextarea}></textarea>
</div>
{/* 单选框 */}
<select value={this.state.city} onChange={this.handleCity}>
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="cd">成都</option>
</select>
{/* 复选框 */}
<input type="checkbox" checked={this.state.ischecked} onChange={this.handleChecked}>
</input>
</div>
)
}
}
export default Hrllo
受控组件的优化
import React from 'react';
class Hrllo extends React.Component{
state = {
count:0,
txt:'11',
textarea:'富文本框',
city:'bg',
ischecked:false,
}
handleChange=e=>{
const target=e.target;
const value=target.type === 'checkbox'
?target.checked
:target.value;
const name=target.name;
console.log('你刚刚点击了'+e.target);
this.setState({
[name]:value,
})
console.log(this.state)
}
render() {
return (
<div>
{/* 输入框 */}
<div>
<input value={this.state.txt} name="txt"
onChange={this.handleChange}></input>
</div>
{/* 复选框 */}
<div>
<textarea value={this.state.textarea} name="textarea"
onChange={this.handleChange}></textarea>
</div>
{/* 单选框 */}
<select value={this.state.city} onChange={this.handleChange} name="city" >
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="cd">成都</option>
</select>
{/* 复选框 */}
<input type="checkbox" checked={this.state.ischecked} name="ischecked"
onChange={this.handleChange}>
</input>
</div>
)
}
}
export default Hrllo
非受控组件(DOM方式)
// 非受控组件
import React from 'react';
class Hrllo extends React.Component{
constructor(){
super()
this.txtref=React.createRef();
}
getTxt=()=>{
console.log('文本框架的值'+this.txtref.current.value);
}
render() {
return (
<div>
{/* 输入框 */}
<input type="text" ref={this.txtref}/>
<button onClick={this.getTxt}>获取文本框的值</button>
</div>
)
}
}
export default Hrllo
9 组件部分小案例:
评论列表:
报错:非大写字母开头