上一篇
六、react事件
import React, { Component } from "react";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
};
}
sayHi = (msg = "你好,今年我要学好react") => {
alert(msg);
};
render() {
return (
<div>
{/* 事件 和普通js事件一致,需要驼峰式写法 */}
<button onClick={() => alert("你好,我喜欢react")}>按钮一</button>
<button onClick={()=>{this.sayHi("我是中国人")}}>按钮二-传参</button>
<button onClick={this.sayHi.bind(this,"我是中国人")}>按钮三-传参</button>
</div>
);
}
}
七、更新数据 setState
import React, { Component } from "react";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
isLog: false,
};
}
render() {
return (
<div>
{/* 更新数据 setState */}
<button
onClick={() => {
this.setState({ isLog: !this.state.isLog });
}}
>切换</button>
{this.state.isLog ? <p>法外狂徒张三</p> : <p>正义警长黑猫</p>}
</div>
);
}
}
八、实现表单双向绑定
1.非受控表单
import React, { Component, createRef } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = {};
//创建一个dom 引用
this.inpRef = createRef();
}
getVal = () => {
//获取表单值
alert(this.inpRef.current.value);
};
render() {
return (
<div>
{/* 非受控表单 */}
<input type="text" ref={this.inpRef} />
<button onClick={this.getVal}>获取值</button>
</div>
);
}
}
export default App;
2.受控表单-双向绑定
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = {
msg: "你好,我喜欢react",
};
}
changeMsg = (e) => {
this.setState({ msg: e.target.value });
};
render() {
return (
<div>
{/* 受控表单三种写法 */}
<p>{this.state.msg}</p>
<input type="text" value={this.state.msg} onChange={this.changeMsg} /><br />
<input type="text" value={this.state.msg} onChange={this.changeMsg.bind(this)} /><br />
<input type="text" value={this.state.msg} onChange={e=>this.changeMsg(e)} />
</div>
);
}
}
export default App;
九、实现 todolist 功能
import React, { Component, createRef } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = {
list: [
{ title: "学习vue", done: true },
{ title: "学习react", done: false },
],
};
// 创建一个dom引用
this.tempRef = createRef();
}
delItem = (item) => {
// 缓存list
var list = this.state.list;
// 查找下标
var ind = list.findIndex((value) => value.title == item.title);
// 删除
list.splice(ind, 1);
// 更新(setState才会触发视图的更新)
this.setState({ list });
};
addItem = () => {
// 缓存list
var list = this.state.list;
// 缓存input
var inp = this.tempRef.current;
// 添加
list.unshift({ title: inp.value, done: false });
// 更新视图
this.setState({ list });
// 清除input内容
inp.value = "";
};
checkItem = (item) => {
// 缓存list
var list = this.state.list;
// 查找下标
var ind = list.findIndex((value) => value.title == item.title);
// 值去反
list[ind].done = !list[ind].done;
// 更新视图
this.setState({ list });
};
render() {
return (
<div>
<input type="text" ref={this.tempRef} />
<button onClick={this.addItem}>添加</button>
<h3>正在进行 {this.state.list.filter((item) => !item.done).length}</h3>
{this.state.list
.filter((item) => !item.done)
.map((item) => (
<div className="item" key={item.title}>
<input
type="checkbox"
checked={item.done}
onChange={this.checkItem.bind(this, item)}
/>
<span>{item.title}</span>
<button onClick={this.delItem.bind(this, item)}>x</button>
</div>
))}
<h3>已经完 {this.state.list.filter((item) => item.done).length}</h3>
{this.state.list
.filter((item) => item.done)
.map((item) => (
<div className="item" key={item.title}>
<input
type="checkbox"
checked={item.done}
onChange={this.checkItem.bind(this, item)}
/>
<span>{item.title}</span>
<button onClick={this.delItem.bind(this, item)}>x</button>
</div>
))}
</div>
);
}
}
export default App;
十、组件
1.函数组件与类组件
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<h1>组件</h1>
<User></User>
<Produce></Produce>
</div>
);
}
}
export default App;
//一个函数就是一个组件 函数名称大写
function User() {
return (
<div>
<div>一个函数组件</div>
<hr />
</div>
);
}
//一个类就是一个组件
class Produce extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<p>一个类组件</p>
</div>
);
}
}
2.组件的传参与图片的导入
import React, { Component } from "react";
//导入图片
import logo from "./logo.svg";
class App extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<h1>组件</h1>
{/* 第一种导入图片到方法 */}
<User item={{ name: "小明", font: logo }}></User>
{/* 如果这样报错,看User是否写了默认参数 */}
<User></User>
<Produce></Produce>
{/* 第二种导入图片的方法 */}
<img src={require("./logo.svg").default} alt="" width="80" />
</div>
);
}
}
export default App;
//默认参数
User.defaultProps = { item: { name: "张三", font: logo } };
//一个函数就是一个组件 函数名称大写
// props参数是单向数据流,是只读
function User(props) {
return (
<div>
<div className="font">
<img src={props.item.font} alt="" width="80" />
</div>
<div>{props.item.name}</div>
<hr />
</div>
);
}
//一个类就是一个组件
class Produce extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<p>一个类组件</p>
</div>
);
}
}
十一、组件的复用
import React, { Component } from "react";
class APP extends Component {
constructor(props) {
super(props);
this.state = {
color: "red",
bgColor: "yellow",
};
}
setColor = (v) => this.setState({ color: v });
setBgColor = (v) => this.setState({ bgColor: v });
render() {
return (
<div>
<h1>子父传参</h1>
<h3 style={{ color: this.state.color }}>子父传参</h3>
{/* 把方法当属性props传入给子元素Ctrl */}
<Ctrl setColor={this.setColor}></Ctrl>
<h3 style={{ backgroundColor: this.state.bgColor }}>颜色控制器</h3>
<Ctrl setColor={this.setBgColor}></Ctrl>
</div>
);
}
}
export default APP;
// 在子组件单击按钮,执行父组件的setColor方法
function Ctrl(props) {
return (
<div>
<button onClick={() => props.setColor("red")}>红</button>
<button onClick={() => props.setColor("green")}>绿</button>
<button onClick={() => props.setColor("blue")}>蓝</button>
<button onClick={() => props.setColor("pink")}>粉</button>
</div>
);
}