案例
todo list
相关知识点
state
简单运用 (创建, 修改)- 条件判断
- 循环
- 富文本内容展示:
__html
键名是固定的, 不能修改 ref
获取到原生HTML
标签
代码
import React, {Component, createRef} from 'react';
class App extends Component {
state = {
todoList: [
{
id: 1,
value: 'aa'
},
{
id: 2,
value: 'bb'
},
{
id: 3,
value: 'cc'
}
]
}
inputRef = createRef()
handlerClick = () => {
const newTodoList = [...this.state.todoList]
const addTodo = {
id: Math.random() * 10000000,
value: this.inputRef.current.value
}
newTodoList.push(addTodo)
this.setState({
todoList: newTodoList
})
this.inputRef.current.value = ''
}
handlerDelete = (index) => {
// 这里使用 slice 和上面的 ... 展开运算符是一样的效果
// slice 只能对一维数组进行深拷贝, 多维的话还是浅拷贝
// 此时也可以使用 concat, 拷贝原则和 slice 一样
const newTodoList = this.state.todoList.slice()
newTodoList.splice(index, 1)
this.setState({
todoList: newTodoList
})
}
render() {
return (
<div>
<input type="text" ref={this.inputRef}/>
<button onClick={this.handlerClick}>add</button>
{
this.state.todoList.length === 0 ? <h3>暂无内容</h3> : <ul>
{
this.state.todoList.map((item,index) => {
return (
<li key={item.id}>
{/*{item.value}*/}
<span dangerouslySetInnerHTML={
{
__html: item.value
}
}></span>
<button onClick={() => this.handlerDelete(index)}>del</button>
</li>
)
})
}
</ul>
}
</div>
);
}
}
export default App;
受控组件todo-list
相关知识点
state
用法- 受控组件使用
- 动态绑定
css
中style
样式
代码
import React, {Component} from 'react';
class App extends Component {
state = {
todoList: [
{
id: 1,
value: 'aa',
isChecked: false
},
{
id: 2,
value: 'bb',
isChecked: false
},
{
id: 3,
value: 'cc',
isChecked: false
}
],
inputValue: ''
}
handlerClick = () => {
const newTodoList = [...this.state.todoList]
const addTodo = {
id: Math.random() * 10000000,
value: this.state.inputValue,
isChecked: false
}
newTodoList.push(addTodo)
this.setState({
todoList: newTodoList,
inputValue: ''
})
}
handlerDelete = (index) => {
// 这里使用 slice 和上面的 ... 展开运算符是一样的效果
// slice 只能对一维数组进行深拷贝, 多维的话还是浅拷贝
// 此时也可以使用 concat, 拷贝原则和 slice 一样
const newTodoList = this.state.todoList.slice()
newTodoList.splice(index, 1)
this.setState({
todoList: newTodoList
})
}
getInputValue = (event) => {
this.setState({
inputValue: event.target.value
})
}
changeToDoItemStatus = (index) => {
const newTodoList = [...this.state.todoList]
newTodoList[index]['isChecked'] = !newTodoList[index]['isChecked']
this.setState({
todoList: newTodoList
})
}
render() {
return (
<div>
<input onChange={this.getInputValue} type="text" value={this.state.inputValue}/>
<button onClick={this.handlerClick}>add</button>
{
this.state.todoList.length === 0 ? <h3>暂无内容</h3> : <ul>
{
this.state.todoList.map((item,index) => {
return (
<li key={item.id}>
<input type="checkbox" checked={item.isChecked} onChange={() => this.changeToDoItemStatus(index)}/>
<span dangerouslySetInnerHTML={
{
__html: item.value
}
} style={{textDecoration:item.isChecked ? 'line-through' : ''}}></span>
<button onClick={() => this.handlerDelete(index)}>del</button>
</li>
)
})
}
</ul>
}
</div>
);
}
}
export default App;
电影选项卡
相关知识点
state
状态基本使用- 组件的导入
- 类名动态绑定
- 循环
代码
app.jsx
import React, { Component } from 'react';
import Film from './component/Film'
import Cinema from './component/Cinema'
import Center from './component/Center'
import './app.css'
class App extends Component {
state = {
menuList: [
{
id: 1,
label: '电影'
},
{
id: 2,
label: '影院'
},
{
id: 3,
label: '我的'
},
],
current: 0
}
handlerClick = (index) => {
this.setState({
current: index
})
}
changeShowMenu = () => {
switch (this.state.current) {
case 1:
return <Cinema></Cinema>
case 2:
return <Center></Center>
default:
return <Film></Film>
}
}
render() {
return (
<div>
{
this.changeShowMenu()
}
<ul>
{
this.state.menuList.map((item,index) => {
return (
<li onClick={() => this.handlerClick(index)} className={this.state.current === index ? 'active': ''} key={item.id}>{item.label}</li>
)
})
}
</ul>
</div>
);
}
}
export default App;
app.css
* {
margin: 0;
padding: 0;
}
ul {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
display: flex;
justify-content: space-around;
}
li {
list-style: none;
padding: 20px;
}
.active {
color: red;
}
Center.jsx
import React, {Component} from 'react';
class Center extends Component {
render() {
return (
<div>
center
</div>
);
}
}
export default Center;
Cinema.jsx
import React, {Component} from 'react';
class Cinema extends Component {
render() {
return (
<div>
cinema
</div>
);
}
}
export default Cinema;
Film.jsx
import React, {Component} from 'react';
class Film extends Component {
render() {
return (
<div>
film
</div>
);
}
}
export default Film;