React案列
Opened this issue · 0 comments
xiaotiandada commented
2018-11-23 17:47:51
React案列
React 做的小案列
记录学习笔记什么的~
React案列一
简易版-todoList
import React, { Component } from "react";
// import logo from "./logo.svg";
import "./App.css";
class App extends Component {
// 状态
constructor(props){
super(props)
this.state = {
list: [], // 列表数据
inputValue: '' // 输入框数据
}
}
// 添加列表数据
addList(){
// es6 语法
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
// 改变inputValue
changeInput(e) {
// 目标值
let value = e.target.value
this.setState({
inputValue: value,
})
}
// 删除列表数据
delList(index) {
// 拷贝值 删除
let list = [...this.state.list]
list.splice(index, 1)
this.setState({
list
})
}
render() {
return (
<div>
<div>
// 数据绑定 改变事件绑定this
<input value={this.state.inputValue} onChange={this.changeInput.bind(this)} type="text"/>
// 添加事件 绑定this
<button onClick={this.addList.bind(this)}>添加</button>
</div>
<ul>
{
this.state.list.map((item,index) => {
return (
// 删除事件 绑定this 传index
<li key={index} onClick={this.delList.bind(this, index)}>{item}</li>
)
})
}
</ul>
</div>
);
}
}
export default App;
- 事件,需要state里面的值需要绑定this
onClick={this.delList.bind(this, index)}
- 改变state 需要用 this.setState
this.setState({})
- input 双向绑定数据 不用改变事件 输入框内容不会改变 并且警告报错
// 改变inputValue
changeInput(e) {
// 目标值
let value = e.target.value
this.setState({
inputValue: value,
})
}
<input value={this.state.inputValue} onChange={this.changeInput.bind(this)} type="text"/>
刚刚搜了一下
todoList 组件与通信
// 父组件
import React, { Component, Fragment } from "react";
import Item from './Item'
class App extends Component {
constructor(props){
// ...
// 绑定this 代码优化
this.addList = this.addList.bind(this)
this.changeInput = this.changeInput.bind(this)
this.delList = this.delList.bind(this)
}
// ...
getHead() {
return (
<div>
<input value={this.state.inputValue} onChange={this.changeInput} type="text"/>
<button onClick={this.addList}>添加</button>
</div>
)
}
getItem() {
return (
this.state.list.map((item,index) => {
return (
<Item
delList={this.delList} // 子组件调用父组件方法
key={index} // 父组件通过属性传递值
content={item} // 同
index={index} // 同
/>
)
})
)
}
render() {
return (
<Fragment> // 忽略外层包裹的 div 页面不显示
{this.getHead()} // 函数返回 head
<ul>{this.getItem()}</ul> // 函数返回 Item
</Fragment>
);
}
}
export default App;
// 子组件
import React, { Component } from "react"; // ...
class Item extends Component {
constructor(props){
super(props)
this.delItem = this.delItem.bind(this) // 同上
}
delItem(){
const {delList, index} = this.props // 解构赋值
delList(index) // 调用父级方法
}
render() {
const { content } = this.props; // 解构赋值
return (
<li onClick={this.delItem}>{content}</li> // 调用删除方法
)
}
}
export default Item
css 样式
1.内样样式需要
style={{'background': 'red','color': '#fff'}}
- 定义类名不能用 class
因为 class 已经用来 定义React组件
className='head-button'
Qq:952822399
Qq群 iD 718639024
大家也可以进来互相交流~
最后就是厚脸皮的一步(觉得不错可以点个star哦~~~) 仓库地址
同时也欢迎Pr!!!
同时也欢迎Pr!!!
同时也欢迎Pr!!!