react入门笔记4

1.用官方提供的脚手架工具构建一个react项目

1. npm install -g create-react-app 全局下安装脚手架工具
2. create-react-app my-demo 创建项目 my-demo是项目名字
3. cd my-demo 进入项目
4. npm start 运行，启动项目

2.项目目录简介

1. package.json文件里是一些项目的介绍
2. src目录里放的是我们写的项目的所有源代码
3. index.js是所有代码的入口文件

3.简易版TodoList(新增及删除功能)

import React, { Component , Fragment} from 'react'

class TodoList extends Component{
    constructor(props) {
        super(props)
        this.state = {
            inputValue : "123",
            list : []
        }
    }
    render() {
        return (
            <Fragment>
                <input value = {this.state.inputValue} onChange = {this.handleInputChange.bind(this)}/><button onClick = {this.handleBtnClick.bind(this)}>提交</button>
                <ul>
                    {
                        this.state.list.map((item, index) => {
                            return <li key={index} onClick = {this.handleItemDelete.bind(this,index)}>{item}</li>
                        })
                    }
                </ul>
            </Fragment>

        )
    }

    handleInputChange(e) {
        console.log(this);
        //this.setState({
        //    inputValue : e.target.value 
        //})
        const value = e.target.value
        this.setState(() => {
            return {
                inputValue : value
            }
        })
    }

    handleBtnClick(e) {
        //this.setState({
        //    list: [...this.state.list, this.state.inputValue],
        //    inputValue : ""
        //})
        //setState() 可以接收一个函数，这个函数接受两个参数，第一个参数表示上一个状态值，第二参数表示当前的 props，
        //这个函数的prevState是React框架帮你保存和传递的，自己不用传。第一个参数prevState就是上面设置的this.state
        this.setState((prevState) => ({
            list: [...prevState.list, prevState.inputValue],
            inputValue : ''
        }))
    }

    handleItemDelete(index) {
        //const listNew = [...this.state.list];
        //listNew.splice(index,1)
        //this.setState({
        //    list : listNew
        //})
        this.setState((prevState) => {
            const listNew = [...prevState.list];
            listNew.splice(index,1)
            return {list : listNew}
        })
    }
}

export default TodoList

当React元素包含html标签时，如果不设置dangerouslySetInnerHTML属性，就会把html当做字符串

<li key={index} onClick={this.handleItemDelete.bind(this, index)} dangerouslySetInnerHTML={{__html:item}}></li>

效果：点击提交后<h2>标签被正常显示成了标题样式

启用dangerouslySetInnerHTML属性，可能会受到XSS攻击

4.组件拆分及组件之间的传值

1. 父向子组件传值，通过props

   父组件TodoList文件中：记得引入子组件import TodoItem from './TodoItem'

   <ul>
       {
           this.state.list.map((item, index) => {
               return (
               	<div>
                   	<TodoItem content={item} key={index}/>
                   </div>
               )
           })
       }
   </ul>
   

   子组件TodoItem文件中：

   import React, { Component } from 'react'
   
   class TodoItem extends Component{
       constructor(props) {
           super(props);
           this.state = {
   
           }
       }
   
       render() {
           return <div>{this.props.content}</div>
       }
       
   }
   
   export default TodoItem
   

2. 子向父组件传值，通过事件，（父组件通过props把自己的方法传给子组件，这样子组件就能调用父组件的方法，也就能修改父组件的数据了）

   父组件TodoList文件中：

   <ul>
       {
           this.state.list.map((item, index) => {
               return (
                   <TodoItem
                   	key={index}
                       content={item}
                       index={index}
                       deleteItem={this.handleItemDelete.bind(this)}
                   />
               )
           })
       }
   </ul>
   

   子组件TodoItem文件中：

   import React, { Component } from 'react'
   
   class TodoItem extends Component{
       constructor(props) {
           super(props);
           this.delete = this.delete.bind(this)
           this.state = {
   
           }
       }
   
       render() {
           return <div onClick={this.delete}>{this.props.content}</div>
       }
       
       delete() {
       	//es6解构赋值写法
   		const {deleteItem , index} = this.props
       	deleteItem(index)
           //this.props.deleteItem(this.props.index)
       }
   }
   
   export default TodoItem