React初级

1. Fragment
   报错

import React,{Component} from 'react'
class Items extends Component{
    render(){
        return  (
               <div><input /> <button> 增加服务 </button></div>
               <ul>
                   <li>123</li>
                   <li>12344</li>
               </ul> 
        )
    }
}
export default Items

正确

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

class Items extends Component{
    render(){
        return  (
            <Fragment>
               <div><input /> <button> 增加服务 </button></div>
               <ul>
                   <li>123</li>
                   <li>1234</li>
               </ul> 
            </Fragment>
        )
    }
}
export default Items 

2. 不bind this，直接赋值无效

    inputChange(e) {
        //console.log(this);
        //this.state.inputValue = e.target.value;
        this.setState({
          inputValue : e.target.value
        })
        console.log(this.state.inputValue)
    }

input 必须绑定this

<input value={this.state.inputValue} onChange={this.inputChange.bind(this)}/>

3，不能直接修改state
正确

//删除单项服务
deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })
}

错误

//删除单项服务
deleteItem(index){
    this.state.list.splice(index,1)
    this.setState({
        list:this.state.list
    }) 
}

4. 注释和className

// 不能用class，不能用//注释
{/*- this is correct -*/}
<input className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)}/>

5.父组件向子组件传值
父组件插入子组件

<ChildrenItem content={item} />

子组件调用props.content 获取父组件的值

import React, { Component } from 'react'; //imrc
class Children  extends Component { //cc

    render() { 
        return ( 
            <div>{this.props.content}</div>
         );
    }
}
export default ChildrenItem;

6.子组件向父组件传值
父组件绑定父组件的方法传给子组件

<div>
    <ChildrenItem
    key={index+item}
    content={item}
    deleteItem={this.deleteItem.bind(this)}
    />
</div>

子组件props调用父级方法，传入父组件获取的参数

handleClick() {
    console.log(this.props.index)
    this.props.deleteItem(this.props.index)
}
render() { 
    return ( 
        <div onClick={this.handleClick}>
            {this.props.content}
        </div>
        );
}

7.react 单向数据流
父组件传给子组件的数据流是单向的，不能在子组件中改变。
只能通过父组件传递方法，子组件调用父组件的方法，然后再传值回来在父组件上改。

8.react对参数的校验

import PropTypes from 'prop-types'
// 在class外面写类型限制
ChildrenItem.PropTypes = {
    content:PropTypes.string,
    index:PropTypes.number,
    name:PropTypes.string.isRequired   
}
// 默认类型
ChildrenItem.defaultProps = {
    name: '1234'
}

9.ref

inputChange(e) {
    //console.log(this);
    //this.state.inputValue = e.target.value;
    this.setState({
        inputValue: this.input.value
    })
}
<input
    value={this.state.inputValue}
    onChange={this.inputChange.bind(this)}
    ref={(input)=>{this.input=input}}
/>
//setState是一个异步函数，console.log会先执行，导致state里面的数计数错误
addList() {
    this.setState({
        list: [...this.state.list, this.state.inputValue]
    },()=>{
        console.log(this.ul.querySelectorAll('div').length)
    })
}