案例

未匹配的标注

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 用法
  • 受控组件使用
  • 动态绑定 cssstyle 样式

代码

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;

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
讨论数量: 0
发起讨论 只看当前版本


暂无话题~