受控组件&&非受控组件

Posted 2021-12-05 huihuihero

声明，本博客摘自：https://segmentfault.com/a/1190000002675685

表单组件像 input、textarea 不同于其它的原生组件，因为它们会随着用户交互而改变。这些组件提供了接口方便我们管理这些交互。

交互属性

表单组件提供了一些受用户交互影响的属性

• value，支持input、textarea
• checked，支持input type类型是checkbox或者radio
• selected，支持option
  在html中，textarea 的值是通过子属性设置的。在React中，需要通过value设置。我们可以通过添加事件属性onChange监听内容的变化，onChange会在下列情况下被触发：
• input或者textarea的内容改变
• input的checked状态改变

• select的状态改变

  受控组件

  设定了value的input就是一个受控组件。input里会一直展现这个值

var InputDemo = React.createClass({
    render: function () {
        return (
            <input type="text" value="Hello!"/>
        );
    }
});
React.render(
    <InputDemo />,
    document.body
);

渲染完成后，input里会一直显示Hello!，用户的任何输入都是无效的。如果你想随着用户的输入改变，使用onChange事件

var InputDemo = React.createClass({
    getInitialState: function () {
        return {value: 'Hello!'}
    },
    render: function () {
        return (
            <input type="text" onChange={this.handleChange} value={this.state.value}/>
        );
    },
    handleChange: function (event) {
        this.setState({value: event.target.value});
    }
});
React.render(
    <InputDemo />,
    document.body
);

不受控组件

value没有值或者值设为null的input是一个不受控组件。用户的任何输入都会反映到输入框中

var InputDemo = React.createClass({ 
    render: function () {
        return (
            <input type="text" value={null}/>
        );
    }       
});
React.render(
    <InputDemo />,
    document.body
);

这个时候也可以监听onChange事件，内容的改变也会触发事件。
可以通过defaultValue给input设置默认值

var InputDemo = React.createClass({
    render: function () {
        return (
            <input type="text" defaultValue="xxx"/>
        );
    }
});
React.render(
    <InputDemo />,
    document.body
);