React基础_2(组件.事件.state.受控非受控)

前言

本篇内容主要包含以下内容
1.组件的创建
2.组件的事件绑定
3.state的使用
4.受控组件和非受控组件

正文

React最关键的内容就是组件，组件就是页面中一个个的元素，也可以说是一个个标签，共同组成整个页面.
创建一个组件:

function Hello(){
	return (
		<h2>我是一个函数组件</h2>)
	}
ReactDOM.render(<Hello />,document.getElementById('root'))
//函数组件的两个约定:
//1.开头必须是大写字母
//2.必须要有返回值，返回值就是这个组件的结构

//使用类创建组件
class Hello extends React.Component{
	render(){
		return (<h2>我是一个类组件</h2>)
		}
	}
ReactDOM.render(<Hello />,document.getElementById('root'))
/*
类组件的四个约定:
1.开头必须是大写
2.必须继承自React.Component
3.必须有render()方法
4.render()方法必须有返回值
*/

将组件抽离为独立的js文件，在使用时导入即可.

import React from "react";
import { render } from "react-dom";
class Hello extends React.Component{
    render(){
        return(
            <div>Hello JSX!!</div>
        )
    }
}

export default Hello;//设置默认导出;

//导入渲染即可
import Hello from './Hello';
ReactDOM.render(<Hello />,document.getElementById('root'))

React中的事件绑定：

//类组件，值得注意的是引用函数时要用this.函数名引用，函数前不需要加function;
class App extends React.Component{
    handClick(){
        console.log("事件触发")
    }
    render(){
        return (
            <div>
                <button onClick={this.handClick}>点击我</button>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

function App(){
    function handClick(){
        console.log("事件触发了")
    }

    return (
        <button onClick={handClick}>单击触发事件</button>
    )
}

ReactDOM.render(<App />,document.getElementById('root'))

//事件对象
函数组件又称无状态组件，类组件又叫做有状态组件。函数组件没有自己的状态，只负责展示静态的数据，类组件有自己的状态(state)，用于更新UI。

state的使用：

class App extends React.Component{
    constructor(){
        super()
		//设置state(状态)的值
        this.state=
            {count:0}
    }
    render(){
        return (
            <h2>count的值为{this.state.count}</h2>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

class App extends React.Component{
	//简写模式
    state={
        count:1
    }
    render(){
        return (
            <h2>count的值为{this.state.count}</h2>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

通过this.setState()方法来修改状态，不能直接修改state中的状态。

class App extends React.Component{
    state={
        count:1
    }
    handClick=()=>{
        this.setState({
            count:this.state.count+1
        })
    }
    render(){
        return (
            <div>
            <h2>count的值为{this.state.count}</h2>
            <button onClick={this.handClick}>count+1</button>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

上面使用的是箭头函数，如果使用之前的定义函数的方法，会出现this找不到的问题，而箭头函数本身并没有this，所以会向外寻找从而找到组件里的this.推荐使用上面的方法.
解决this只想问题还有下面这种处理方法:

class App extends React.Component{
    constructor(){
        super()
        this.state={
            count:1
        }
        //用于将handClick的this与组件的this绑定，相当于将函数里的this指向组件的this
        this.handClick=this.handClick.bind(this)
    }
    handClick(){
        this.setState({
            count:this.state.count+1
        })
    }
    render(){
        return (
            <div>
            <h2>count的值为{this.state.count}</h2>
            <button onClick={this.handClick}>count+1</button>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root')

组件分为受控组件和非受控组件，
受控组件：

class App extends React.Component{
    state={
        txt:''
    }
    txtChange=(e)=>{
        this.setState({
            txt:e.target.value
        })
    }
    render(){
        return(
            <div>
            	/*在这里绑定一个事件处理程序，当输入框里的文本出现更新时，
            	先触发txtChange更新state，之后重新渲染页面显示新的state.*/
                <input type="text" value={this.state.txt} onChange={this.txtChange}></input>
                <h2>{this.state.txt}</h2>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

其他受控组件的用法：

class App extends React.Component{
    state={
        txt:'',
        sel:'weman',
        check:true
    }
    txtChange=(e)=>{
        this.setState({
            txt:e.target.value
        })
    }
    selChange=e=>{
        this.setState({
            sel:e.target.value
        })
    }
    checkChange=e=>{
        this.setState({
            check:e.target.checked
        })
    }
    render(){
        return(
            <div>
                <textarea value={this.state.txt} onChange={this.txtChange}></textarea>
                <h2>{this.state.txt}</h2>
                <select value={this.state.sel} onChange={this.selChange}>
                    <option value='man'>男</option>
                    <option value='weman'>女</option>
                </select>
                <h2>{this.state.sel}</h2>
                <input type="checkbox" checked={this.state.check} onChange={this.checkChange}
                name="n" />123
                <h2>{this.state.check}</h2>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

每个都写一个事件处理函数过于繁琐，可以进行一些简化，根据需要处理的标签类型进行相应的处理。

class App extends React.Component{
    state={
        txt:'',
        sel:'weman',
        check:true
    }
    allChange=e=>{
    	//获取标签的类型
        const value=e.target.type==='checkbox'
            ?e.target.checked
            :e.target.value
        this.setState({
            [e.target.name]:value
            //这里使用中括号可以去除''和""
        })
    }
    render(){
        return(
            <div>
            	//name使用与state里面一样的名字一是为了方便区分，而是为了便于获取state里的变量名;
                <textarea value={this.state.txt} onChange={this.allChange} name='txt'></textarea>
                <h2>{this.state.txt}</h2>
                <select value={this.state.sel} onChange={this.allChange} name='sel'>
                    <option value='man'>男</option>
                    <option value='weman'>女</option>
                </select>
                <h2>{this.state.sel}</h2>
                <input type="checkbox" checked={this.state.check} onChange={this.allChange}
                name='check'  />123
                <h2>{this.state.check}</h2>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

非受控组件:
是一种直接操作DOM的方法基本不用,了解

class App extends React.Component{
    constructor(){
        super()
        //创建ref对象
        this.txtRef=React.createRef()
    }
    handClick=e=>{
        //通过ref获取文本的值
        console.log(this.txtRef.current.value)
    }
    render(){
        return (
            <div>
            	//将ref对象绑定到文本框里
                <input type="txt" ref={this.txtRef}></input>
                <button onClick={this.handClick}>点击我获取输入内容</button>
            </div>
        )
    }
}
ReactDOM.render(<App />,document.getElementById('root'))

结语

笔者也是第一次学习做出的总结，要是能从我这里得到一些帮助最好不过，若有错误还望大佬在评论帮忙指出。