Fork me on GitHub

react-基础操作（2）项目目录以及组件

字数统计: 1.6k字   |   阅读时长≈ 8分

源码在我的github地址react-tuts

目录结构





TodoHeader

1.在App.js中设置值传到组件，props向下传递的方法，注意要用花括号。

2.在TodoHeader/index.js中，模版渲染语法 （类组件前面要加this.props 函数用props）

3.prop-types的使用 npm install –save prop-types 判定数据类型





TodoList

在TodoList/index.js中

1.通过PropTypes验证todos组件中各个部分的类型

2.用两种方法写出（注意要设置key值）





Like（点赞功能）

1.设置state里面islike的属性

2.创建handleClick方法（这里用到setState，是异步的，在其内部还可以用到prevState表示点击之前的state的状态）

3.emoji网站





Input输入框

1.未输入时默认state的InputValue为空

2.handleInputChange输入时同步显示在输入框中

3.handelAddClick：点击添加按钮时，调用App.js里的addTOdo函数，同时清空输入框

4.添加回车事件，通过keyup（keycode 13 = Enter）

5.添加完成之后获取焦点，用createRef





添加checkbox

1.在App.js中新建函数onCompletedChanged函数，并且在里面标注

2.在TodoList里面的index.js里添加onCompletedChange={this.props.onCompletedChange}

3.在TodoItem.js里面添加handelCheckboxChange函数，它是onChange的方法

4.新增知识点const noop = ()=> {}





各个文件具体代码

src/App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React, { Component, Fragment } from 'react'
import{
    TodoHeader,
    TodoInput,
    TodoList,
    Like
} from './components'


export default class App extends Component {
    // state = {
    //     title: '待办事情'
    // }
    //不知道props还是state就用props
    constructor() {
        super()
        this.state = {
            title: '待办事情',
            desc:'有点多',
            article: '<div>123456 <i>654321</i></div>',
            todos: [
            {
                id: 1,
                title: '看视屏',
                assignee: 'Leo',
                isCompleted: false
            },
            {
                id: 2,
                title: '实践',
                assignee: 'Xiao',
                isCompleted: true
            }]
        }
    }

    addTodo = (todoTitle) => {
        
        //这样写不对，TODOTitle不是一个数组
        // this.setState({
        //     todos: this.state.todos.push({
        //         id: Math.random,
        //         title: todoTitle,
        //         isCompleted: false
        //     })
        // })
        
        
        // 这个代码是对的
        // this.setState({
        //     todos: this.state.todos.concat({
        //         id: Math.random(),
        //         title: todoTitle,
        //         isCompleted: false
        //     })
        // })

        // const newTodos = this.state.todos.slice()
        const newTodos = [...this.state.todos]
        newTodos.push({
            id: Math.random(),
            title: todoTitle,
            isCompleted: false
        })
        this.setState({
            todos: newTodos
        })
    }



    onCompletedChange = (id) =>{
        this.setState((prevState) =>{
            return{
                todos: prevState.todos.map(tod =>{
                    if(tod.id === id){
                        tod.isCompleted = !tod.isCompleted
                    }
                    return tod
                })
            }
        })
    }

    render() {
        return (
            <Fragment>
                {<div dangerouslySetInnerHTML={{__html: this.state.article}} />}
                {this.state.todos[0].isCompleted ? '完成' : '未完成'}
                {
                    this.state.todos.map(todo =>{
                        return <div key={todo.id}>{todo.title}</div>
                    })
                }

                <TodoHeader desc={this.state.desc} x={1} y={2}>
                    <i>待办事项列表</i>
                    <br></br>
                    {this.state.title}
                </TodoHeader>

                <TodoInput  
                    addTodo={this.addTodo}
                />

                <TodoList 
                todos={this.state.todos} 
                onCompletedChange={this.onCompletedChange}
                />

                <Like />
            </Fragment>
        //     <>
        //     <TodoHeader />
        //     <TodoInput />
        //     <TodoList />
        // </>
        //两种方法都可以
        )
    }
}





src/index.js
1
2
3
4
5
6
7
8
9
import React from 'react'
import { render } from 'react-dom'

import App from './App'

render(
    <App />,
    document.querySelector('#root')
)



src/components/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//负责导出所有的组件，下面两种方法都可以

// import TodoHeader from './TodoHeader'
// import TodoInput from './TodoInput'
// import TodoList from './TodoList'

// export {
//     TodoHeader,
//     TodoInput,
//     TodoList
// }

export{ default as TodoHeader} from './TodoHeader'
export{ default as TodoInput} from './TodoInput'
export{ default as TodoList} from './TodoList'
export{ default as Like} from './Like'





src/components/Like/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import React, { Component } from 'react'

export default class Like extends Component {
    constructor(){
        super()
        this.state = {
            isliked: false
        }
    }
    handleLikedClick = () =>{
        //使用这种方式在react里是不允许的，可以修改数据，但界面不会重新渲染
        //this.state.isLiked = !this.state.isLiked
        //要修改数据，就要使用setState方法，setState方法有两种情况
        //第一个参数又有两种情况，第一种情况是一个对象
        // this.setState({
        //     isliked: !this.state.isliked
        // })
        //第二种情况是一个方法
        this.setState((prevState,props)=>{
            console.log('setState内部的状态',this.state.isliked)
            return{
                isliked: !prevState.isliked
            }
        },() =>{
            //由于setState是异步的，如果要获取到最新的state，应该在这个回调里获取
            console.log(this.state.isliked)
        })
        console.log('setState外部的状态',this.state.isliked)
    }

    render() {
        return (
            <div>
                <span onClick={this.handleLikedClick}>
                {
                    this.state.isliked ? '取消❤️' : '喜欢🖤'
                }
                </span>
            </div>
        )
    }
}



src/components/TodoHeader/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React from 'react'
import PropTypes from 'prop-types'

export default function TodoHeader(props) {
    //console.log(props)
    return (
        <>    
        <h1>
            {props.children}
        </h1>
        <h3>
            {props.desc}
        </h3>
        <p>{props.x+props.y}</p>
        </>
    )
}

TodoHeader.propTypes = {
    desc: PropTypes.string.isRequired,
    x: PropTypes.number.isRequired,  //是否是数据以及是否必要
    y: PropTypes.number
}

TodoHeader.defaultProps = {
    desc: '明天会更好'
}



src/components/TodoInput/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
//react里面通过ref来获取组件或者dom元素，要使用ref之前必须先调用React.createRef创建一个ref
import React, { Component, createRef } from 'react'
import PropTypes from 'prop-types'


//类组件前面要加this.props 函数用props
export default class TodoInput extends Component {
    static propTypes = {
        btnText: PropTypes.string
    }
    static defaultProps = {
        btnText: '添加TODO'
    }
    constructor(){
        super()
        this.state = {
            inputValue: ''
        }
        //this.handelAddClickCopy = this.handelAddClick.bind(this,124)

        //在constructor里来创建Ref
        this.inputDom = createRef()
    }
    handleInputChange = (e) => {
        this.setState({
            inputValue: e.currentTarget.value
        })
    }
    handleKeyUp = (e) =>{
        if(e.keyCode ===13){
            this.handelAddClick()
        }
    }
    handelAddClick = () => {
        //console.log(this.state)
        //实际的项目中，这里还需要区队this.state.inputValue做验证，如果验证通过在执行
        if(this.state.inputValue === ''){
            return
        }
        this.props.addTodo(this.state.inputValue)
        this.setState({
            inputValue: ''
        },
        () => {
            this.inputDom.current.focus()
        })
    }
    render() {
        return (
            <div>
                <input 
                type="text" 
                value={this.state.inputValue}
                onChange={this.handleInputChange}
                onKeyUp={this.handleKeyUp}
                ref={this.inputDom}
                />

                <button onClick={this.handelAddClick}>{this.props.btnText}</button> 
            </div>
        )
    }
}



src/components/TodoList/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React, { Component } from 'react'
import TodoItem from './TodoItem'
import PropTypes from 'prop-types'

export default class TodoList extends Component {
    static propTypes = {
        todos:PropTypes.arrayOf(PropTypes.shape({
            id: PropTypes.number.isRequired,
            title: PropTypes.string.isRequired,
            isCompleted: PropTypes.bool.isRequired
        })).isRequired,
        onCompletedChange: PropTypes.func
    }
    render() {
        console.log(this.props)
        return (
            <ul>
                {
                    this.props.todos.map(todo => {
                    return(
                        // <TodoItem
                        // key={todo.id}
                        // id={todo.id}
                        // title={todo.title}
                        // isCompleted={todo.isCompleted}
                        // />
                        <TodoItem
                        onCompletedChange={this.props.onCompletedChange}
                        key={todo.id}
                        {...todo}
                        ></TodoItem>
                    )
                })
                }
            </ul>
        )
    }
}



src/components/TodoList/TodoItem.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React, { Component } from 'react'
const noop = ()=> {}

export default class TodoItem extends Component {
   handelCheckboxChange = () =>{
       const {
           onCompletedChange = noop,
           id
       } = this.props
       onCompletedChange(id)
   }
   
    render() {
        const {
            isCompleted,
            title
        } = this.props
        //下面的this.props.isCompleted可以改成isCompleted
       return (
           <li>
              <input 
                type="checkbox" 
                checked={isCompleted}
                onChange={this.handelCheckboxChange}
                />
              <span>{title}{this.props.isCompleted ? '完成' : '未完成'}</span> 
           </li>
       )
   }
}
赏

谢谢你的关注

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

标签：爱读书的计算机渣硕
Java、Python、Linux



都懂一些

自学前端ing


生活不允许普通人内向 ​​​