React 学習共有 (2)

4. イベントバインディング

イベントをバインドするには、on+イベント名を使用します。これはネイティブ イベントとは異なることに注意してください。ネイティブ イベントはすべて小文字の onclick、React のイベントはハンプ onClick です。React イベントはネイティブ イベントではなく、合成イベントです。
上記のコード:

import React, {
    
     Component } from 'react'
export default class Header extends Component {
    
    
    render() {
    
    
        return (
            <div>
                <div>我是头部</div>
                <input type="text" />
                
                {
    
    /* 如果处理逻辑过多，不推荐这种写法 */}
                <button onClick={
    
    () => {
    
     console.log(this, "1111") }}>按钮一</button>
                 {
    
    /* 需要考虑this的指向可以用bind改变this的指向，第一参数必须写this，后面的参数可以进行传参，不推荐这种写法 */}
                <button onClick={
    
    this.button1.bind(this,11111)}>按钮二</button>
                {
    
    /* 不需要考虑this指向，但是不能进行传参，推荐这种写法 */}
                <button onClick={
    
    this.button2}>按钮三</button>
                 {
    
    /* 这样不用考虑this的指向 也可以进行传参，很推荐这种写法 */}
                <button onClick={
    
    () => this.button3(11111)}>按钮四</button>
            </div>
        )
    }
    button1(num) {
    
    
        console.log(this, "22222",num);
    }
    button2 = () => {
    
    
        console.log(this, "333");
    }
    button3(num) {
    
    
        console.log(this, "44444");
        console.log(num);
    }
}

補足 1: この呼び出しのポイントを変更する 3 つの方法
関数
apply を自動的に実行するように変更します。関数
binding を自動的に実行するように変更します。関数を手動で実行するように変更します。 例: handle().bind(this)() が実行されますこの上

補足 2:
React は実際にはイベントを特定のイベントにバインドしません

要素ですが、イベント委任のパターンを採用しています。

ボタンのイベント バインディングを削除しても、イベントは消えないことがわかります。div
#root 上のすべてのイベントを削除した後でのみイベントが消えます。

一般的なブラウザと同様に、イベント ハンドラにはイベント オブジェクトが自動的に渡されます。イベント オブジェクトには、基本的に一般的なブラウザ イベント オブジェクトと同じメソッドとプロパティが含まれています。違いは、React のイベント オブジェクトがブラウザーによって提供されるのではなく、内部的に独自に構築されることです。また、event.stopPropagation やevent.preventDefault などの一般的なメソッドもあります。

五、Refの使用

1. ラベルに ref="username" を設定し、this.refs.username を取得します。ref はアプリケーションの実際の dom を取得できます。

import React, {
    
     Component } from 'react'
export default class App extends Component {
    
    
    render() {
    
    
        return (
            <div>
                <input type="text" ref="mytext" />
                <button onClick={
    
    () => {
    
    
                    console.log(111, this.refs.mytext.value);
                }}>button</button>
            </div>
        )
    }
}

しかし、VScode を使用すると、refs に水平線が表示されることがわかりますが (非推奨になっていることがわかります)、コンソールにはエラーが表示されません。
そこで、ここに次のように追加します。

root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
)

厳密モードをオンにすると、コンソールにエラーが表示されます

。正しい書き方は次のとおりです。

import React, {
    
     Component } from 'react'
export default class App extends Component {
    
    
    myRef = React.createRef()
    render() {
    
    
        return (
            <div>
                <input type="text" ref={
    
    this.myRef} />
                <button onClick={
    
    () => {
    
    
                    console.log(111, this.myRef.current.value);
                }}>button</button>
            </div>
        )
    }
}

dom ノードを取得できるだけでなく、コンソールは厳密モードでエラーを報告しなくなります。

6. 状態の適用

ステートとは、コンポーネントが特定の表示状況を記述したデータであり、コンポーネント自身によって設定および変更され、つまりコンポーネント自身によって維持されます。ステートを使用する目的は、コンポーネントの表示を行うことです。状態ごとに異なるコンポーネント (自己管理)

import React, {
    
     Component } from 'react'
export default class App extends Component {
    
    
    render() {
    
    
        let text = "收藏"  //临时变量
        return (
            <div>
                <h1>欢迎来到react开发</h1>
                <button onClick={
    
    () => {
    
    
                    console.log(text);
                    text = "取消收藏"
                    console.log(text);
                }}>{
    
    text}</button>
            </div>
        )
    }
}

//这里两种写法是一样的结果

import React, {
    
     Component } from 'react'
export default class App extends Component {
    
    
    text = "收藏"  //全局变量
    render() {
    
    
        // let text = "收藏"
        return (
            <div>
                <h1>欢迎来到react开发</h1>
                <button onClick={
    
    () => {
    
    
                    console.log(this.text);
                    this.text = "取消收藏"
                    console.log(this.text);
                }}>{
    
    this.text}</button>
            </div>
        )
    }
}

実際にはテキストが変更されていますが、dom 上では更新されていないことがわかります。
理由:
this.state は純粋な js オブジェクトです。vue では、data 属性は Object.defineProperty によって処理されます。data のデータが変更されると、データはgetterとsetterがトリガーされますが、Reactにはそのような処理がなく、直接変更してもReactには認識されないため、特別なメソッドsetStateを使用して状態を変更する必要があります。

import React, {
    
     Component } from 'react'
export default class App extends Component {
    
    
    state = {
    
    
        text: "收藏"
    }
    render() {
    
    
        return (
            <div>
                <h1>欢迎来到react开发</h1>
                <button onClick={
    
    () => {
    
    
                    this.setState({
    
    
                        text: '取消收藏'
                    })
                }}>{
    
    this.state.text}</button>
            </div>
        )
    }
}

ここで、変更できるのは 1 回だけであることがわかりました。クリックするたびに変更したい場合は、それを制御するステータス フラグを追加する必要があります。
最初

import React, {
    
     Component } from 'react'
export default class App extends Component {
    
    
    state = {
    
    
        flag: false
    }
    render() {
    
    
        return (
            <div>
                <h1>欢迎来到react开发</h1>
                <button onClick={
    
    () => {
    
    
                    this.setState({
    
    
                        flag: !this.state.flag
                    })
                }}>{
    
    this.state.flag ? "取消收藏" : "收藏"}</button>
            </div>
        )
    }
}

二番目

import React, {
    
     Component } from 'react'
export default class App extends Component {
    
    
    constructor() {
    
    
        super()
        this.state = {
    
    
            text: "收藏",
            flag: false
        }
    }
    render() {
    
    
        return (
            <div>
                <h1>欢迎来到react开发 --- {
    
    this.state.text}</h1>
                <button onClick={
    
    () => {
    
    
                    this.setState({
    
    
                        flag: !this.state.flag,
                        text: this.state.flag ? "收藏" : "取消收藏"
                    })
                }}>{
    
    this.state.flag ? "取消收藏" : "收藏"}</button>
            </div>
        )
    }
}

ここでは、コンストラクターの送信方法に注意する必要があり、super() を記述する必要があり、Component コンポーネント クラスから継承し、以前のプロパティを取得する必要があります。

番外

配列リストをレンダリングするときに、dom ループのレンダリングに map メソッドを使用できます。

import React, {
    
     Component } from 'react'
export default class App extends Component {
    
    
    state = {
    
    
        list: [111, 2222, 3333, 44444]
    }
    render() {
    
    
        return (
            <div>
                {
    
    
                    this.state.list.map((item, index) =>
                        <li key={
    
    index}>{
    
    item} --- {
    
    index}</li>
                    )
                }
            </div>
        )
    }
}

//第二种

import React, {
    
     Component } from 'react'
export default class App extends Component {
    
    
    state = {
    
    
        list: [111, 2222, 3333, 44444]
    }
    render() {
    
    
        let arrlist = this.state.list.map((item, index) =>
            <li key={
    
    index}>{
    
    item} --- {
    
    index}</li>
        )
        return (
            <div>
                {
    
    
                    arrlist
                }
            </div>
        )
    }
}

キー値を追加できることに注意してください。状態の追加、削除、更新などの操作がない場合は、インデックス値を使用できます。それ以外の場合は、一意の識別子 (id) である必要があります。