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

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

#このチュートリアルの動作環境: 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 '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
• Don't

  かっこを追加しないでください:

• ##onClick={ this.fn( ) }

  このとき、最初に fn() が呼び出され、その後 fn の実行結果がクリックイベントの処理関数として使用されます

  • これを忘れずに書いてください
  3. イベント処理 - これは問題を示しています

#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 を指します。理由:
• クラス
クラスとモジュールの内部はデフォルトで strict モードになっているため、実行モードを指定するために

use strict

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

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

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 App extends React.Component {
  state = {
    msg: 'hello react'
  }

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

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

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