React实操：DOM交互与状态管理-优快云博客

本文通过一个React小Demo，详细介绍了如何在React中获取真实的DOM节点，实现输入框焦点的自动获取，以及如何实时更新和展示数据。通过使用React的ref属性和setState方法，展示了组件状态管理和用户交互的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React小Demo：获取真实的DOM节点和实时数据展示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="build/react.js"></script>
    	<script src="build/react-dom.js"></script>
    	<script src="build/browser.min.js"></script>
    	<script src="build/jquery.min.js"></script>
    </head>
    <body>
    	<div id="example">aaa</div>
    </body>
<script type="text/babel">

var Note=React.createClass({
        //getDefaultProps 方法可以用来设置组件属性的默认值
        getDefaultProps:function(){
            return {title:'hello'};
        },
        //获取真实的dom节点，需要用到 'ref'属性
        handleClick:function(){
            this.refs.mytext.focus();
        },
        //getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取
        getInitialState:function(){
           return {value:'delete text'};
       },
        //为input的onchange事件绑定的事件，注意value值应设定为event.target.value而不是this.state.value
        //如果设置为this.state.value，value值只能是"只读"属性，不能改变
       handleChange:function(event){
           this.setState({value:event.target.value});
        },
       render:function(){
           var value=this.state.value;
           return 
            <div>
                <input type="text" ref="mytext" value={value} onChange={this.handleChange}/>;
                <input type="button" value="Click To GetFocus" onClick={this.handleClick}/>;
    	        <h1>{value}</h1>;
           </div>
        }
   });
   ReactDOM.render(
       <Note/>,
       document.getElementById('example')
    )
</script>
</html>

转载于:https://my.oschina.net/u/3095670/blog/995081