반응에서 구성 요소 상태를 변경하는 방법

반응에서는 setState()를 사용하여 구성 요소의 상태를 수정할 수 있습니다. setState()는 구성 요소 상태를 업데이트하는 데 사용되는 메서드입니다. 이 메서드는 변경 사항을 구성 요소 상태에 추가할 수 있으며 최신 상태를 가져올 수도 있습니다. 구문은 "this.setState(수정할 데이터의 일부 })"입니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, React18 버전, Dell G3 컴퓨터.

1. Stateful 구성 요소 및 Stateless 구성 요소

---

1. 먼저 상태가 무엇인지 이해하세요.

정의:

는 에서 특정 순간의 사물의 모양을 설명하는 데 사용됩니다. /code>의 某一时刻的形态的数据 ,  一般称为state。(可以简单理解为状态就是数据)
例如：9月23号时书的库存数量； 18岁时人的身高. vue中也有相关的概念

特点:

能被改变，改变了之后视图会有对应的变化 (双向数据绑定)

2.有状态组件和无状态组件

有状态组件：能定义state的组件。类组件就是有状态组件。

无状态组件：不能定义state的组件。函数组件又叫做无状态组件

注意:

2019年02月06日，React 16.8版本中引入了 React Hooks，从而函数式组件也能定义自己的状态了。【相关推荐：Redis视频教程、编程教学】

本文主要讲解类组件的状态

3.类组件的状态

1）定义状态

使用 state = { } 来做初始化

import React from "react";

export default class Hello extends React.Component {

  // 这里的state就是状态
  state = {
    list:  [{ id: 1, name: "给我一个div" }],
    isLoading : true
  };
}

2）在视图中使用

 render() {
    return (
      <>
            <h1>姓名-{this.state.name}</h1>
            <ul>
            {this.state.list.map((item) => (
            <li key={item.id}>{item.name}</li>
             ))}
            </ul>
        <div>{this.state.isLoading ? "正在加载" : "加载完成"}</div>
      </>
    );
  }

二、事件绑定

---

1.格式

6a0c90f0d644f9cc41c34c5db4ca90650adaba3e89c641156828c5bef7bd8846

注意：

React 事件名采用驼峰命名法，比如：onMouseEnter、onFocus、 onClick ......

2.示例

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

const title = <h1>react中的事件</h1>


export default class Hello extends React.Component {
  fn() {
    console.log(&#39;mouseEnter事件&#39;)
  }
  render() {
    return (
      <div
            onClick = { () => console.log(&#39;click事件&#39;) }
            onMouseEnte r = { this.fn }
      </div>
    )
  }
}

const content = (
  <div>
    {title}
    {<Hello />}
  </div>
)

ReactDOM.render ( content , document.getElementById (&#39;root&#39;) )

注意事项：

• 事件名是小驼峰命名格式

• 在类中补充方法

• this . fn不要加括号：

  • onClick={ this.fn( ) } 此时会先调用fn()，然后将fn的执行结果当做click事件的处理函数

别忘记了写this

三、事件处理-this指向问题

---

1.问题代码:

class App extends React.Component {
        // 组件状态
      state = {
        msg: 'hello react'
      }
      
      // 事件处理函数
      handleClick() {
            console.log(this) // 这里的this是 undefined
      }
      
      render() {
            console.log(this) // 这里的this是当前的组件实例 App
        
          return (
              <div>
                    <button onClick={this.handleClick}>点我</button>
              </div>
        )
      }
}

结果是这样:

• render方法中的this指向的是当前react组件。
• 事件处理程序中的this指向的是undefined

2.原因:

class类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用,所以类中的函数this指向了undefined

3.解决事件函数this指向:

方式1:

在事件处理程序外套一层箭头函数

缺点：需要在处理函数外额外包裹一个箭头函数, 结构不美观

优点:

前面讲过在 {this.handleClick ( )}这里面调用处理函数的时候不要加小括号,不然里面的程序会立即执行掉,现在在外面包裹一层箭头函数之后,不仅可以加上小括号,还能实现传参,后面会用到

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick () {
    console.log(this.state.msg)
  }

  render () {
    return (
      <div>
        <button onClick={ () => { this.handleClick ( ) }}>点我</button>
      </div>
    )
  }
}

方式2：使用bind

通过bind()方法改变函数this指向并不执行该函数的特性解决

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick () {
    console.log(this.state.msg)
  }

  render () {
    return (
      <div>
        <button onClick={ this.handleClick.bind (this) }>点我</button>
      </div>
    )
  }
}

方式3：

在class中声明事件处理函数的时候直接使用箭头函数

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick = () => {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }
}

优点:

代码简洁,直观,使用最多的一种方式

四、修改组件的状态

---

注意:

不能通过直接修改state中的值来让视图变化 ! ! !
通过this.setState()data

는 일반적으로

state

라고 합니다. (상태는 데이터라고 간단히 이해하시면 됩니다)🎜예: 9월 23일의 책 재고 수량. 18세의 키. vue🎜🎜🎜특징:🎜🎜🎜에도 관련 개념이 있습니다. 변경 후에는 변경될 수 있습니다(양방향 데이터 바인딩)🎜

🎜2 상태 저장 구성 요소 및 상태 비저장 구성 요소🎜🎜🎜상태 저장 구성 요소: 상태를 정의합니다. 🎜클래스 구성 요소🎜는 상태 저장 구성 요소입니다. 🎜🎜상태 없는 구성 요소: 상태를 정의할 수 없는 구성 요소입니다. 🎜기능적 구성 요소🎜상태 비저장 구성 요소라고도 함🎜🎜🎜참고:🎜🎜🎜2019년 2월 6일 React 버전 16.8에 React Hooks가 도입되었으므로 기능적 구성 요소도 자체 상태를 정의할 수 있습니다. [관련 권장사항: Redis 동영상 튜토리얼, 프로그래밍 교육】🎜🎜이 글은 주로 🎜수업 구성 요소🎜🎜의 상태를 설명합니다.

🎜3. 클래스 구성 요소의 상태🎜🎜🎜🎜1) 상태 정의🎜🎜🎜state = { }를 사용하여 초기화🎜

state = {
    count: 0,
    list: [1, 2, 3],
    person: {
      name: 'jack',
      age: 18
    }
  }
  
  // 【不推荐】直接修改当前值的操作：
  this.state.count++
  ++this.state.count
  this.state.count += 1
  this.state.count = 1
  this.state.list.push(4)
  this.state.person.name = 'rose'
  
  // 【推荐】不是直接修改当前值，而是创建新值的操作：
  this.setState({
    count: this.state.count + 1,
    list: [...this.state.list, 4],
    person: {
      ...this.state.person,
    	// 要修改的属性，会覆盖原来的属性，这样，就可以达到修改对象中属性的目的了  
      name: 'rose'
    }
  })

🎜🎜2) 🎜🎜

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleChange = (e) => {
    this.setState({
      msg: e.target.value
    })
  }

   // value 绑定state 配合onChange事件双向绑定
  render() {
    return (
      <div>
        <input type="text" value={this.state.msg} onChange={this.handleChange}/>
      </div>
    )
  }
}

사용🎜2. 이벤트 바인딩🎜🎜🎜

🎜1 Format🎜🎜

🎜eb437cac15671f9a02315df4ce84559514138f913db36d08620ba5becb69ce58🎜🎜🎜Note🎜:🎜🎜React 이벤트 이름은 다음과 같은 카멜 표기법을 사용합니다. : onMouseEnter , onFocus, onClick...🎜

🎜2. 예🎜

import { createRef } from 'react'

class Hello extends Component {
  txtRef = createRef()

  handleClick = () => {
    // 文本框对应的 DOM 元素
    // console.log(this.txtRef.current)

    // 文本框的值：
    console.log(this.txtRef.current.value)
  }

  render() {
    return (
      <div>
        <input ref={this.txtRef} />
        <button onClick={handleClick}>获取文本框的值</button>
      </div>
    )
  }
}

🎜🎜Notes🎜:🎜

• 🎜이벤트 이름은 Camel Case 명명 형식입니다🎜
• 🎜클래스에 메소드를 추가하세요🎜
• 🎜이것 .fn🎜하지 마세요🎜add 대괄호:🎜
• onClick={ this.fn( ) } 이때 fn()이 먼저 호출되고 fn의 실행 결과가 처리로 사용됩니다. 클릭 이벤트 기능

🎜꼭 작성해주세요🎜

🎜3. 🎜🎜🎜

🎜1. 질문 코드:🎜🎜🎜rrreee🎜결과는 다음과 같습니다.🎜

• 렌더링 메서드의 이 내용은 현재 반응 구성 요소.
• 이벤트 핸들러에서 정의되지 않음

🎜2을 가리킵니다. 이유:🎜 🎜🎜 class 내부적으로 기본 모드는 strict 모드이므로 실행 모드를 지정하기 위해 use strict를 사용할 필요가 없습니다. 코드가 클래스나 모듈에 작성되어 있는 한, 엄격 모드만 사용할 수 있으므로 클래스의 this 함수는 정의되지 않은🎜

🎜3을 가리킵니다. 다음을 가리킵니다:🎜 🎜

🎜방법 1:🎜

🎜이벤트 핸들러에서 화살표 함수 래핑🎜🎜단점: 추가 래핑이 필요합니다. 핸들러 함수 외부 보기 흉한 구조의 화살표 함수🎜🎜장점:🎜🎜앞서 언급한 것처럼 {this.handleClick( )}에서 처리 함수를 호출할 때 괄호를 추가하지 마세요. 그렇지 않으면 프로그램 내부 즉시 실행됩니다. 이제 외부에 화살표 함수 레이어를 래핑한 후 괄호를 추가할 수 있을 뿐만 아니라 나중에 사용할 매개변수를 전달할 수도 있습니다🎜rrreee

🎜방법 2 : 바인딩🎜을 사용하세요

🎜bind() 메서드를 통해 함수의 this 지점을 변경하면 함수의 특성 솔루션이 실행되지 않습니다🎜rrreee

🎜방법 3: 🎜 h4>🎜클래스에서 이벤트 처리 함수를 선언할 때 화살표 함수를 직접 사용🎜rrreee🎜장점:🎜🎜코드가 간결하고 직관적이며 가장 많이 사용되는 방법🎜

🎜4. 구성요소 상태 수정🎜🎜🎜🎜참고:🎜🎜🎜상태 값을 직접 수정하여 뷰를 변경할 수 없습니다! code>this.setState()메소드 수정🎜🎜React에서 setstate는 구성 요소 상태를 업데이트하는 데 사용되는 메서드입니다. setState()는 구성 요소 상태에 대한 변경 사항을 대기열에 추가하고 이 구성 요소를 다시 렌더링해야 한다고 React에 알립니다. 업데이트된 상태를 사용하는 구성요소입니다. 🎜

1.语法:

语法：this.setState( { 要修改的部分数据 } )
这是继承自React.Component的修改类组件状态的方法

state = {
    count: 0,
    list: [1, 2, 3],
    person: {
      name: 'jack',
      age: 18
    }
  }
  
  // 【不推荐】直接修改当前值的操作：
  this.state.count++
  ++this.state.count
  this.state.count += 1
  this.state.count = 1
  this.state.list.push(4)
  this.state.person.name = 'rose'
  
  // 【推荐】不是直接修改当前值，而是创建新值的操作：
  this.setState({
    count: this.state.count + 1,
    list: [...this.state.list, 4],
    person: {
      ...this.state.person,
    	// 要修改的属性，会覆盖原来的属性，这样，就可以达到修改对象中属性的目的了  
      name: 'rose'
    }
  })

五、表单处理-受控组件

---

• HTML中表单元素是可输入的，即表单维护着自己的可变状态（value）。
• 但是在react中，可变状态通常是保存在state中的，并且要求状态只能通过setState进行修改。
• React中将state中的数据与表单元素的value值绑定到了一起，由state的值来控制表单元素的值
• 受控组件：value值受到了react控制的表单元素

示例代码:

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleChange = (e) => {
    this.setState({
      msg: e.target.value
    })
  }

   // value 绑定state 配合onChange事件双向绑定
  render() {
    return (
      <div>
        <input type="text" value={this.state.msg} onChange={this.handleChange}/>
      </div>
    )
  }
}

注意事项：

使用受控组件的方式处理表单元素后，状态的值就是表单元素的值。即：想要操作表单元素的值，只需要通过this.setState( { 要修改的部分数据 } )操作对应的状态即可

六、表单处理-非受控组件-ref

---

• 受控组件是通过 React 组件的状态来控制表单元素的值
• 非受控组件是通过手动操作 DOM 的方式来控制
• ref：用来在 React 中获取 DOM 元素

示例代码:

import { createRef } from 'react'

class Hello extends Component {
  txtRef = createRef()

  handleClick = () => {
    // 文本框对应的 DOM 元素
    // console.log(this.txtRef.current)

    // 文本框的值：
    console.log(this.txtRef.current.value)
  }

  render() {
    return (
      <div>
        <input ref={this.txtRef} />
        <button onClick={handleClick}>获取文本框的值</button>
      </div>
    )
  }
}

（学习视频分享：编程基础视频）

위 내용은 반응에서 구성 요소 상태를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!