React的可控组件和不可控组件

最新推荐文章于 2024-08-03 09:28:46 发布

honghong.zhou

最新推荐文章于 2024-08-03 09:28:46 发布

阅读量838

点赞数

分类专栏： react-js 文章标签： react

本文链接：https://blog.csdn.net/chengQunBin/article/details/78361390

版权

react-js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

可控组件

<input type="text" value={this.state.helloTo} />

像这个代码中，我们可以看出，value的值是由状态来确定的，只要拿到this.state.helloTo的值就可以。
demo：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>可控组件</title>
        <script src="js/react.js"></script>
        <script src="js/react-dom.js"></script>
        <script src="js/browser.min.js"></script>
    </head>
    <body>
        <script type="text/babel">
            var MyForm=React.createClass({
                getInitialState:function(){
                    return ({helloTo:"World"});
                },
                submitHandler:function(event){
                    event.preventDefault();
                    alert(this.state.helloTo);
                },
                handleChange:function(event){
                    this.setState({helloTo:event.target.value});
                },
                render:function(){
                    return (
                        <form onSubmit={this.submitHandler}>
                            <input type="text" value={this.state.helloTo} onChange={this.handleChange}/>
                            <button type="submit">Speak</button>
                        </form>
                    );
                }
            });
            ReactDOM.render(<MyForm></MyForm>,document.body);
        </script>
    </body>
</html>

不可控组件

<input type="text" defaultValue="Hello World" ref="helloTo"/>

像这样，defaultValue的值是一个确定的值，所以这是一个不可控的组件。
如果想要获取input中的value的值。我们需要通过ref来获取。
demo：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>不可控组件</title>
        <script src="js/react.js"></script>
        <script src="js/react-dom.js"></script>
        <script src="js/browser.min.js"></script>
    </head>
    <body>
        <script type="text/babel">
            var MyForm=React.createClass({
                submitHandler:function(event){
                    event.preventDefault();
                    var helloTo=ReactDOM.findDOMNode(this.refs.helloTo).value;
                    alert(helloTo);
                },
                render:function(){
                    return(
                        <form onSubmit={this.submitHandler}>
                            <input type="text" defaultValue="Hello World" ref="helloTo"/>
                            <button type="submit">Speak</button>
                        </form>
                    );
                }
            });

            ReactDOM.render(<MyForm></MyForm>,document.body);
        </script>
    </body>
</html>