ホームページ > 記事 > ウェブフロントエンド > Reactでコンポーネントの状態を変更する方法
react では、setState() を使用してコンポーネントの状態を変更できます。 setState()は、コンポーネントの状態を更新するためのメソッドです。このメソッドは、コンポーネントの状態への変更をキューに入れ、最新の状態を取得することもできます。構文は、「this.setState({変更するデータの一部 })」です。
#このチュートリアルの動作環境: Windows7 システム、react18 バージョン、Dell G3 コンピューター。
は、
特定の瞬間における物事の形状を記述するために使用されるデータであり、一般に
状態と呼ばれます。 (状態がデータであると単純に理解できます)例: 9 月 23 日の書籍の在庫数量、18 歳時の身長。vue にも関連する概念があります
機能:
変更可能。変更後、ビューには対応する変更が加えられます (双方向データ バインディング)
2. ステートフル コンポーネントとステートレス コンポーネント
ステートレスコンポーネント: 状態を定義できないコンポーネント。 関数コンポーネント
は、ステートレスコンポーネントとも呼ばれます注:
2019年2月6日、React 16.8バージョンReactでフックは、機能コンポーネントが独自の状態も定義できるように導入されています。 [関連する推奨事項: Redis ビデオ チュートリアル
、プログラミング教育 ]この記事では主に クラス コンポーネントのステータスについて説明します
3. クラスコンポーネントの状態
初期化には 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> </> ); }を使用します。イベント バインディング
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('mouseEnter事件') } render() { return ( <div onClick = { () => console.log('click事件') } onMouseEnte r = { this.fn } </div> ) } } const content = ( <div> {title} {<Hello />} </div> ) ReactDOM.render ( content , document.getElementById ('root') )
イベント名はキャメルケースの命名形式です
かっこを追加しないでください:
このとき、最初に 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> ) } }結果は次のようになります:
クラス
方法 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> ) } }
クラスでイベント処理関数を宣言するときに、アロー関数を直接使用します。
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() メソッドを通じて変更してください
语法: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' } })
setState
进行修改。由state的值来控制表单元素的值
示例代码:
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( { 要修改的部分数据 } )
操作对应的状态即可
示例代码:
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 サイトの他の関連記事を参照してください。