一、 输入框双向数据绑定

import React, { Component } from 'react';
class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputvalue: '',
        };
    }

    render() {
        return (
            <>
                <div>
                    <label htmlFor="uname">用户名：</label>
                    <input onChange={this.unameChange.bind(this)} value={this.state.inputvalue} id="uname" type="text" />
                </div>
            </>
        );
    }
    unameChange(e) {
        // e 为onChange事件的$event参数，不是模板中 this.unameChange.bind(this) 中的this
        // this.unameChange.bind(this) 只是修改了 unameChange 方法的this指向。实参中省略this，且最后一个实参为$event
        // 在 e.target.value 中可获取输入框的值
        this.setState(
            (prevState) => ({
                inputvalue: e.target.value,
            }),
            () => {
                console.log(this.state.inputvalue);
            },
        );
    }
}
export default Test;

二、 设置输入框默认值和获取输入框中的值

1. 设置输入框默认值

import React, { Component } from 'react';
class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputvalue: 'alias',
        };
    }

    render() {
        return (
            <>
                <div>
                    <label htmlFor="uname">用户名：</label>
                    <input defaultValue={this.state.inputvalue} id="uname" type="text" />
                </div>
            </>
        );
    }
}
export default Test;

2. 获取输入框中的值

import React, { Component } from 'react';
class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputvalue: '',
        };
    }

    render() {
        return (
            <>
                <div>
                    <label htmlFor="uname">用户名：</label>
                    <input id="uname" type="text" ref={(v) => (this.inputvalue = v)} />
                </div>
                <div>
                    <button onClick={this.handleClick.bind(this)}>提交</button>
                </div>
            </>
        );
    }

    handleClick() {
        console.log(this.inputvalue.value);
    }
}
export default Test;