学习React第一天

1.掌握组件分类（函数组件、类组件）

函数组件

function MyEvent(){
    return (<div>111111</div>)
}

类组件声明后需要导出

class MyEvent extends Component{
    render(){
        return {(
         <div>2222</div>   
        )}
    }
}
export default MyEvent

组件使用需要在index.js中用标签的方式进行引用展示

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
  <MyEvent>  </MyEvent>
);

2.动态值的用法

写在state中

state={
        a:1,
        list:[
            {id:1,mytext:11111},
            {id:2,mytext:22222},
            {id:3,mytext:33333},
            {id:4,mytext:44444},
           
        ]
    }

在组件中引用，采用this.state.list的方式获取值

3.用ref获取dom元素

创建一个ref实例

myref = React.createRef()

将实例绑定给标签对象

<input type="text" ref={this.myref}/>

获取所需要的值

this.myref.current.value

3.react循环

this.state.list.map((item,index)=>
      <li key={item.id}>
          <span dangerouslySetInnerHTML={
           {__html:item.mytext}
           }>
          </span>
           <button onClick={()=>this.deleteValue(index)}>删除</button>
      </li>)

4.掌握设置动态值方式setState

this.setState({
        list:newlist，
        a:2
       })

5.改变动态值，增加和删除的例子

addValue=()=>{
        let newlist = [...this.state.list]
        newlist.push({
            id:Math.random()*10000,
            mytext:this.myref.current.value
        })
        this.setState({
            list:newlist
        })
    }
    deleteValue(index){
        console.log(index)
        let newlist = this.state.list.concat()
        newlist.splice(index,1)
       this.setState({
        list:newlist
       })
    }