react 自学第一天

今天学习了react 的创建组件，使用组件，碎片化，点击事件以及方法的简单使用，组件之间的拆分以及父组件如何向子组件传值，注释的正确使用，子组件如何调用父组件的方法，如何合理绑定方法与组件对象，react开发中常遇的几个坑，快捷生成代码插件的使用。

完整代码

入口

import React from 'react'
import ReactDOM from 'react-dom'
import XiaoJieJie from './XiaoJieJie'

//JSX--javascript 和 xml < {}
ReactDOM.render(<XiaoJieJie/>,document.getElementById('root'))

父组件

import React, {Component,Fragment} from 'react'
//Fragment，碎片化
import './style.css'
import XiaoJieJieItem from './XiaoJieJieItem'
class XiaoJieJie extends Component{
    constructor(props){
        super(props)
        this.deleteItem=this.deleteItem.bind(this)
        this.add=this.add.bind(this)
        this.inputChange=this.inputChange.bind(this)

        this.state={
            inputValue:'',
            list:['基础按摩','精油推背','头部按摩']
        }
    }
    render(){
        return(
            <Fragment>
                {/* 第一次加注释 */}
                <div>
                    <label htmlFor="jsxp">增加服务</label>
                    <input id="jsxp" className="input" value={this.state.inputValue} onChange={this.inputChange}/>
                    <button onClick={this.add}>增加服务</button>
                    <ul>
                        {
                            this.state.list.map((item,index)=>{
                            return (
                                
                                <XiaoJieJieItem 
                                     key={index+item} 
                                     content={item}
                                     index={index}
                                     deleteItem={this.deleteItem}
                                />
                                
                            )
                            })
                        }
                    </ul>
                </div>
            </Fragment>
        )
    }
    inputChange(e){
        // console.log(e.target.value)
        this.setState({
            inputValue:e.target.value
        })
    }
    //增加列表
    add(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:""
        })
    }
    deleteItem(index){
        let list=this.state.list
        list.splice(index,1)
        this.setState({
            list:list
        })
    }
}
export default XiaoJieJie

子组件

import React, { Component } from 'react';

class XiaoJieJieItem extends Component {

    constructor(props){
        super(props)
        this.handleClick=this.handleClick.bind(this)
    }
    render() { 
        return ( 
            <li onClick={this.handleClick}>{this.props.content}</li>
         );
    }
    handleClick(){
       this.props.deleteItem(this.props.index)
    }
}
 
export default XiaoJieJieItem;