ホームページ > ウェブフロントエンド > フロントエンドQ&A > Reactで属性値を変更する方法

Reactで属性値を変更する方法

藏色散人
リリース: 2022-12-29 09:23:45
オリジナル
2871 人が閲覧しました

react で属性値を変更する方法: 1. 対応するコード ファイルを開く; 2. 配列オブジェクトを作成する; 3. 「this.setState({todoList: todoList.map((item,key)」を渡す)=> ;key == 0?{...item,name: "Jony"}:item)});" メソッドは、配列オブジェクト内の特定の属性値を変更できます。

Reactで属性値を変更する方法

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

react で属性値を変更するにはどうすればよいですか?

React は配列オブジェクト内の特定の属性値を変更します

通常、データはコントローラーで処理され、ビューに送信されます。) レイヤー表示用のこの単純な割り当て方法は次のとおりです。

1

2

3

this.setSate({

 toList: response.data

})

ログイン後にコピー

Vue の実装は次のとおりです。

1

this.todoList = response.data;

ログイン後にコピー

たとえば、これはバックグラウンドによって渡されるデータです。

変更したいのですが、配列オブジェクトの `name` 属性の 1 つの値を実装するにはどうすればよいですか?

1

2

3

4

5

6

7

8

9

10

11

12

state = {//类似于Vue里面的data()

   todoList: [

     {

       img: "xxx",

       name: "小飞",

     },

     {

       img: "xxx",

       name: "小候",

     },

   ]

 };

ログイン後にコピー

まず、vue での実装方法を見てみましょう

1

2

3

this.todoList[0].name = "Jony";

//或者

this.$set(this.todoList[0],"name","Jony");

ログイン後にコピー

わぁ~実際は比較的簡単なので、React で実装するにはどうすればよいでしょうか?

想像力はこんな感じです...

1

2

3

4

5

6

7

8

9

10

11

this.setState({

     todoList[0].name:"Jony"

   })

   //这样报错了,立马想到另一种方式

  let obj = {

     img:"xxx",

     name:"Jony"

   }

   this.setState({

     todoList[0]:obj

   })

ログイン後にコピー

それは機能しません。エディターとブラウザーがエラーを報告し、このようには書けないと告げます

Reactで属性値を変更する方法

実装方法

1

2

3

4

5

6

//三目运算符 `key == 0` 是我写死的

//如果是点击传入的话可以是`key == index(下标)`

 const todoList = [...this.state.todoList];   //浅拷贝一下

  this.setState({

      todoList: todoList.map((item,key)=>key == 0?{...item,name: "Jony"}:item)

    });

ログイン後にコピー

これは公式 Web サイトの setState の説明です

Reactで属性値を変更する方法

推奨学習: " 反応ビデオチュートリアル>>

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

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート