React-组件-受控组件

受控组件

• 值受到 react 控制的表单元素

import React from "react";

class App extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            name: 'BNTang'
        }
    }

    render() {
        return (
            <form>
                <input type="text"
                       value={this.state.name}
                       onChange={(e) => {
                           this.change(e);
                       }}/>
            </form>
        )
    }

    change(e) {
        console.log(e.target.value);
        this.setState({
            name: e.target.value
        });
    }
}

export default App;

受控组件处理技巧

在我们有多个受控组件的时候，这个时候有可能需要编写多个受控组件的处理方法，如果给每一个受控组件绑定一个对应的名称，我们就可以抽离出来一个公共的处理方法处理即可。

import React from 'react';

class App extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            name: 'BNTang',
            email: '303158131@qq.com',
            phone: '18819522032'
        }
    }

    render() {
        return (
            <form>
                <input type="text"
                       value={this.state.name}
                       name={'name'}
                       onChange={(e) => {
                           this.change(e)
                       }}/>
                <input type="email"
                       name={'email'}
                       value={this.state.email}
                       onChange={(e) => {
                           this.change(e)
                       }}/>
                <input type="number"
                       name={'phone'}
                       value={this.state.phone}
                       onChange={(e) => {
                           this.change(e)
                       }}/>
            </form>
        )
    }
    change(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
}

export default App;

官方文档

• ​​https://zh-hans.reactjs.org/docs/forms.html#controlled-components​​