零经验学 react 的第12天 - 表单操作 & watch 监听 & computed 计算

要点总结

• 表单元素使用 value 属性绑定数据， 使用 onChange 来更新数据(class组件 和 function 组件)
• watch 监听：class 组件使用 this.setState的第二个参数进行实现，function组件使用 useEffect及其第二个参数填写 来实现
• computed 计算属性：class 组件使用 get set 函数来实现，function 组件使用 useMemo 来实现

示例代码

函数组件示例

import { useState, useMemo, useEffect } from 'react';

function Form2() {
    const [name, setName] = useState('');
    const [age, setAge] = useState('');
    const [a, setA] = useState(1);
    const [b, setB] = useState(2);
    const [num, setNum] = useState(11);

    // 表单操作
    const changeAge = (e) => {
        setAge(e.target.value);
    }
    const changeName = (e) => {
        setName(e.target.value);
    }

    // computed 属性示例
    const total = useMemo(() => {
        return a + b;
    }, [a, b]);

    // watch 示例
    // 使用 useEffect 来监听 num 的变化
    useEffect(() => {
        alert('num changed: '+ num);
    }, [num]);
    
    return (
        <div>
            <h2>Form2 页面</h2>
            {/* 表单操作 */}
            <div>
                <p>姓名: {name}</p>
                <p>年龄: {age}</p>
                <input type="text" placeholder="姓名" value={name} onChange={(e) => changeName(e)} /><br />
                <input type="number" placeholder="年龄" value={age} onChange={(e) => changeAge(e)} /><br />
            </div>

            {/* computed 属性示例： 使用useMemo */}
            <div>
                <button type="button" onClick={() => setA(11)}>a 设置为 11</button>
                <button type="button" onClick={() => setB(22)}>b 设置为 22</button>
                <div>{total}</div>
            </div>

            {/* watch 示例： 使用 useEffect */}
            <div>
                <p>num: {num}</p>
                <button type="button" onClick={() => setNum(22)}>num 设置为 22</button>
            </div>
        </div>
    );
}

export default Form2;

类组件示例

import React from 'react';

class Form1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            age: '',
            a: 1,
            b: 2,
            num: 11
        };
    }

    // 表单操作
    changeName = (e) => {
        this.setState({
            name: e.target.value
        })
    }
    changeAge = (e) => {
        this.setState({
            age: e.target.value
        })
    }

    // computed 属性示例
    set total(value) {
        return false
    }
    get total() {
        return this.state.a + this.state.b
    }


    // watch 示例
    changeNum = () => {
        this.setState({
            num: 22
        }, () => {
            alert('num changed:' + this.state.num);
        })
    }

    render() {
        return (
            <div>
                <h2>Form1 页面</h2>
                {/* 表单操作 */}
                <div>
                    <p>姓名: {this.state.name}</p>
                    <p>年龄: {this.state.age}</p>
                    <input type="text" placeholder="姓名" value={this.state.name} onChange={(e) => this.changeName(e)} /><br />
                    <input type="number" placeholder="年龄" value={this.state.age} onChange={(e) => this.changeAge(e)} /><br />
                </div>


                {/* computed 属性示例： */}
                <div>
                    <button type="button" onClick={() => this.setState({a: 11})}>{this.state.a}: a 设置为 11</button>
                    <button type="button" onClick={() => this.setState({b: 22})}>{this.state.b}: b 设置为 22</button>
                    <div>{this.total}--{this.state.a}---{this.state.b}</div>
                </div>


                {/* watch 示例 */}
                <div>
                    <p>num: {this.state.num}</p>
                    <button type="button" onClick={this.changeNum}>{this.state.num}: num 设置为 22</button>
                </div>
            </div>
        )
    }
}

export default Form1;