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