Reactでコンポーネントの状態を変更する方法-フロントエンドQ&A-php.cn

Reactでコンポーネントの状態を変更する方法

青灯夜游

リリース： 2022-12-15 19:19:24

オリジナル

2867 人が閲覧しました

react では、setState() を使用してコンポーネントの状態を変更できます。 setState()は、コンポーネントの状態を更新するためのメソッドです。このメソッドは、コンポーネントの状態への変更をキューに入れ、最新の状態を取得することもできます。構文は、「this.setState({変更するデータの一部 })」です。

Reactでコンポーネントの状態を変更する方法

#このチュートリアルの動作環境: Windows7 システム、react18 バージョン、Dell G3 コンピューター。

##1. ステートフルコンポーネントとステートレスコンポーネント

#1. まず状態とは何かを理解します:

定義:

は、

特定の瞬間における物事の形状を記述するために使用される

データであり、一般に 状態と呼ばれます。 (状態がデータであると単純に理解できます)例: 9 月 23 日の書籍の在庫数量、18 歳時の身長。vue にも関連する概念があります
機能:

変更可能。変更後、ビューには対応する変更が加えられます (双方向データバインディング)

2. ステートフルコンポーネントとステートレスコンポーネント

ステートフルコンポーネント: 状態を定義できるコンポーネント。クラスコンポーネント

はステートフルコンポーネントです。

ステートレスコンポーネント: 状態を定義できないコンポーネント。 関数コンポーネント

は、

ステートレスコンポーネントとも呼ばれます注:

2019年2月6日、React 16.8バージョンReactでフックは、機能コンポーネントが独自の状態も定義できるように導入されています。 [関連する推奨事項: 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) ビュー 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. 形式

##<要素イベント名 1={イベント処理関数 1} イベント名 2={イベント処理関数 2} >>
\

Note:

React イベント名には、onMouseEnter、onFocus、onClick...

2 などのキャメルケースの名前が使用されます。例

import React from &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;

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;) )

ログイン後にコピー

#注:

イベント名はキャメルケースの命名形式です

Don't
かっこを追加しないでください:
##onClick={ this.fn( ) }
このとき、最初に fn() が呼び出され、その後 fn の実行結果がクリックイベントの処理関数として使用されます
- これを忘れずに書いてください

#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 メソッド内のこれは、現在の React コンポーネントを指します。イベントハンドラー内のこれは、
unknown

2 を指します。理由:
クラス

use strict

を使用する必要はありません。コードがクラスまたはモジュールに記述されている限り、使用できるのは厳密モードのみであるため、クラス内の関数 this は未定義

3 を指します。イベント関数 this が指すものを解決します:

方法 1:

イベントハンドラーで矢印関数をラップする

欠点: 追加の矢印を追加する必要があります。ハンドラー関数の外側にラップされています関数、構造が美しくありません利点:

前述したように、{this.handleClick () で処理関数を呼び出すときに括弧を追加しないでください。 }, それ以外の場合、プログラムはすぐに実行されます。アロー関数を外側にラップした後、括弧を追加するだけでなく、パラメーターを渡すこともできます。

class App extends React.Component {
  state = {
    msg: &#39;hello react&#39;
  }

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

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

ログイン後にコピー

方法 2: バインドを使用する

bind() メソッドを使用して関数のこのポインターを変更し、関数の特徴的な解決策を実行しないでください

class App extends React.Component {
  state = {
    msg: &#39;hello react&#39;
  }

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

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

ログイン後にコピー

方法 3:

クラスでイベント処理関数を宣言するときに、アロー関数を直接使用します。

class App extends React.Component {
  state = {
    msg: &#39;hello react&#39;
  }

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

ログイン後にコピー

利点:コードは簡潔で直感的で、最もよく使用されます。メソッド

4. コンポーネントのステータスを変更します

##注:

渡すことはできませんビューを変更するにはステート内の値を直接変更してください! ! !

this.setState() メソッドを通じて変更してください

react では setstate が使用されるメソッドですコンポーネントの状態を更新するには、 state ;setState() はコンポーネントの状態への変更をキューに入れ、更新された状態でこのコンポーネントとそのサブコンポーネントを再レンダリングする必要があることを React に通知します。

1.语法:

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

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

ログイン後にコピー

五、表单处理-受控组件

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

示例代码:

class App extends React.Component {
  state = {
    msg: &#39;hello react&#39;
  }

  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 &#39;react&#39;

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>
    )
  }
}

ログイン後にコピー

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

以上がReactでコンポーネントの状態を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。