react(4)

不操作ref 动态更改数据 (react 要尽量少得使用ref)

state = {
        username: '',
        password: ''
    }
    saveForm = (type) => {
        console.log(type);
        return (e) => {
            this.setState({
                [type]: e.target.value
            })
        }
    }
    render() {
        return (
            <form onSubmit={this.dome1}>
                用户名: <input onChange={this.saveForm("username")} type="text" name='username' />
                mima : <input onChange={this.saveForm("password")} type="password" name='password' />
                <button>dengl </button>
            </form>
        )
    }
    dome1 = (e) => {
        e.preventDefault(); // 阻止表单提交
        console.log(this.state);
    }

另一种写法

state = {
        username: '',
        password: ''
    }
    saveForm = (type, event) => {
        this.setState({ [type]: event.target.value })
    }
    render() {
        return (
            <form onSubmit={this.dome1}>
                用户名: <input onChange={event => this.saveForm("username", event)} type="text" name='username' />
                mima : <input onChange={event => this.saveForm("password", event)} type="password" name='password' />
                <button>dengl </button>
            </form>
        )
    }