• 第6章：表单中的受控组件与非受控组件

    第6章：表单中的受控组件与非受控组件

    非受控组件

    React 要编写一个非受控组件, 可以使用 ref 来从 DOM 节点中获取表单数据, 就是非受控组件。例如, 下面的代码使用非受控组件接受一个表单的值：

    class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.input = React.createRef();
    }

    handleSubmit(event) {
        alert('A name was submitted: ' + this.input.current.value);
        event.preventDefault();
    }

    render() {
        return (
            
    
                
                
            
    
        );
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    因为非受控组件将真实数据储存在 DOM 节点中, 所以在使用非受控组件时, 有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码美观性, 并且希望快速编写代码, 使用非受控组件往往可以减少你的代码量。否则, 你应该使用受控组件。

    默认值

    在 React 渲染生命周期时, 表单元素上的 value 将会覆盖 DOM 节点中的值, 在非受控组件中, 你经常希望 React 能赋予组件一个初始值, 但是不去控制后续的更新。在这种情况下, 你可以指定一个 defaultValue 属性, 而不是 value。

    render(){
    return (
        
    
            
            
        
    
    );
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    同样, 和 支持 defaultChecked ,