React表单应用--不可控组件

最新推荐文章于 2021-05-23 22:12:39 发布

DreamFive

最新推荐文章于 2021-05-23 22:12:39 发布

阅读量235

点赞数

分类专栏： React入门和组件

React入门和组件专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在input标签中不把value绑定到state上的就是不可控组件，它的数据不合state对应，所以在开发时会给自己挖很多坑，但是不可控组件并不是不可掌控。

先来做一个最简单的不可用组件。

render:function () {
  return (
      <div>
          <input type="text"/>
      </div>
  )
},

组件完成之后给它加上一个onChange事件，发现是可以监控到变化值的。如果要获得iput中的value值，需先拿到其DOM节点，然后获取其value值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学习React</title>
</head>
<body>
    <div id="reactContainer"></div>

    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
    <script type="text/babel">
        var MyForm = React.createClass({
            getInitialState:function () {
              return  {
                  value:'gao'
              }
            },
            handleChange:function (event) {
              var value = ReactDOM.findDOMNode(this.refs.dream).value;
              console.log(value);
            },
            render:function () {
              return (
                  <div>
                      <input type="text" ref="dream" onChange={this.handleChange}/>
                  </div>
              )
            },
        });

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

组件完成之后给它加上一个onChange事件，发现是可以监控到变化值的。如果要获得iput中的value值，需先拿到其DOM节点，然后获取其value值。

当然我们也可以给input加入默认值，但是不是value了，而是defaultValue。

<input type="text" ref="dream" onChange={this.handleChange} defaultValue="默认值"/>

DreamFive

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录