react组件知识

1.React组件创建的两种方式

   1-1.Js中的函数创建组件

import ReactDom from 'react-dom'

const Com1 = <div />
const app = (
  <div>
    函数式组件
    <Com1 />
  </div>
)
ReactDom.render(app, document.getElementById('root'))

1-2.Js中的class创建组件

// eslint-disable-next-line no-use-before-define
import React from 'react'
import ReactDom from 'react-dom'
// 类里面不能有逗号
// 如果用到了constructor就要写super(),是用来初始化this的，可以绑定事件到this上，
class Com1 extends React.Component {
  constructor () {
    super()
    this.state = {
      num: 1000
    }
  }

  state = {
    num: 1000
  }

  render () {
    const { num } = this.state
    return (
      <div>
        <h1>class创建组件</h1>
        <p>num的值是：{num}</p>
      </div>
    )
  }
}
const app = (
  <div>
    class创建组件
    <Com1 />
  </div>
)
ReactDom.render(app, document.getElementById('root'))

2.有状态与无状态组件

什么是状态

状态定义：是用来描述事物在某一时刻的形态的数据。一般称为state。例如：9月23号时书的库存数量； 18岁时人的身高；

有状态组件与无状态组件

能定义state的组件 类组件就叫有状态组件

不能够定义state的组件  函数组件 就叫无状态组件

注意：2019年02月06日，rect 16.8中引入了 React Hooks，从而函数式组件也能定义自己的状态了

3.事件绑定

• 绑定事件需要传值在事件外面套一个箭头函数  里面的函数进行传值即可
• 方法写箭头函数才可以解决this是undefined的情况  具体原因请移步另一篇博客react中绑定事件this指向问题_m0_52765288的博客-CSDN博客import { Component } from 'react'import ReactDom from 'react-dom'class Com1 extends Component { constructor () { super() this.state = { num: 100 } } hClick () { // alert(1) console.log(this) } render () { return.https://blog.csdn.net/m0_52765288/article/details/121178034
• 遵循小驼峰命名法     
• 在方法中 使用形参e就可以接收到事件对象了 

class Com1 extends Component {
  constructor () {
    super()
    this.state = {
      num: 100
    }
  }

  hClick= (e) =>{
    // alert(1)
    console.log('hClick', this)
  }

  hClick2 = () => {}

  render () {
    const id = 1
    console.log('render', this)
    return (
      <div>
        <h1>事件绑定</h1>
        <button onClick={this.hClick}>绑定事件</button>
        <button
          onClick={() => {
            this.hClick2(id)
          }}>
          绑定事件
        </button>
      </div>
    )
  }
}

4.组件修改状态

 react核心理念之状态不可变  

需要修改state中的状态 需要通过setState来修改状态

• setState中必须是一个对象
• 状态不可变

class Com1 extends Component {
  constructor () {
    super()
    this.state = {
      num: 100
    }
  }

  hClick= (e) =>{
    // alert(1)
    console.log('hClick', this)
    this.setState({    //修改state中的值使用setState
    num:10000
})
  }

  hClick2 = () => {}

  render () {
    const id = 1
    console.log('render', this)
    return (
      <div>
        <h1>事件绑定</h1>
        <button onClick={this.hClick}>绑定事件</button>
        <button
          onClick={() => {
            this.hClick2(id)
          }}>
          绑定事件
        </button>
      </div>
    )
  }
}

5.获取元素表单的值

5.1 ref来获取元素表单的值

分四步：

1. 导入createRef方法
2.  调用createRef方法创建引用
3. 给表单元素设置ref属性
4. 通过current.value获取当前非受控组件的值

// 1.导入createRef 方法
import { Component, createRef } from 'react'
import ReactDOM from 'react-dom'

class HelloReact extends Component {
  // 2.调用createRef方法调用引用
  inputRef = createRef()
  state = {
    name: 'jack'
  }

  hClick = () => {
    // 4.通过current.value来获取当前dom元素
    console.log(this.inputRef.current.value)
  }

  render () {
    return (
      <div>
        {/* 3.给表单绑定ref的值 */}
        <input type="text" ref={this.inputRef} />
        <button onClick={this.hClick}>获取表单元素的值</button>
      </div>
    )
  }
}

const app = (
  <div>
    app
    {/* 2.使用组件 */}
    <HelloReact />
  </div>
)

ReactDOM.render(app, document.getElementById('root'))

5.2 获取受控组件的value

 基本步骤

1. 在state中定义状态
2. 对表单元素做两件事

        2.1绑定value属性与表单关联

        2.2 绑定onChange事件 并在回调中通过setState来修改状态值

import { Component } from 'react'
import ReactDOM from 'react-dom'
class HelloReact extends Component {
  inputRef = createRef()
  // 1.state定义
  state = {
    content: ''
  }

  hClick = (e) => {
    // 3.通过事件对象进行赋值 e.target.value可以拿到表单的值
    this.setState({
      content: e.target.value
    })
  }

  render () {
    return (
      <div>
        {/* 2.value值进行绑定 并绑定onChange事件 */}
        <input type="text" value={this.state.content} onChange={this.hClick} />
        <button onClick={this.hClick}>获取表单元素的值</button>
      </div>
    )
  }
}
const app = (
  <div>
    app
    <HelloReact />
  </div>
)

ReactDOM.render(app, document.getElementById('root'))

6.拓展常见的受控组件

• 文本框、文本域、下拉框：value属性 + onChange事件

• 复选框: checked属性 + onChange事件

• 单选按钮组：checked属性 + onChange事件

代码如下

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  state = {
    username: '',
    desc: '',
    city: '2',
    isSingle: true,
    gender: '男'
  }

  handleName = (e) => {
    this.setState({
      username: e.target.value
    })
  }

  handleDesc = (e) => {
    this.setState({
      desc: e.target.value
    })
  }

  handleCity = (e) => {
    this.setState({
      city: e.target.value
    })
  }

  handleSingle = (e) => {
    this.setState({
      isSingle: e.target.checked
    })
  }

  hGender = (e) => {
    this.setState({
      gender: e.target.value
    })
  }

  render () {
    return (
      <div>
        姓名：<input
          type="text"
          value={this.state.username}
          onChange={this.handleName}
        />
        <br />
        描述：<textarea value={this.state.desc} onChange={this.handleDesc} />
        <br />
        城市：<select value={this.state.city} onChange={this.handleCity}>
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
          <option value="4">深圳</option>
        </select>
        <br />
        是否单身：<input
          type="checkbox"
          checked={this.state.isSingle}
          onChange={this.handleSingle}
        />
        <br />
        <input
          type="radio"
          name="gender"
          value="男"
          checked={this.state.gender === '男'}
          onChange={this.hGender}
        />{' '}
        男
        <input
          type="radio"
          name="gender"
          value="女"
          checked={this.state.gender === '女'}
          onChange={this.hGender}
        />{' '}
        女
      </div>
    )
  }
}

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