09_组件三大属性(3)_refs和事件处理

最新推荐文章于 2023-12-06 11:23:25 发布

weixin_30329623

最新推荐文章于 2023-12-06 11:23:25 发布

阅读量161

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhanzhuang/p/10704650.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    /*
    * 需求：自定义组件，功能说明如下：
    * 1.界面如页面所示
    * 2.点击按钮，提示第一个输入框中的值
    * 3.当第2个输入框市区焦点时，提示这个输入框中的值
    * */

    //1.定义组件
    class MyComponent extends React.Component {
        constructor(props) {
            super(props)
            this.showInput = this.showInput.bind(this);
            this.handleBlur = this.handleBlur.bind(this);
        }

        showInput() {
            alert(this.input.value)
        }
        handleBlur(event){
            alert(event.target.value)
        }

        render() {
            return (
                <div>
                    <input type="text" ref={input => this.input = input}/>&nbsp;&nbsp;
                    <button onClick={this.showInput}>提示输入</button>&nbsp;&nbsp;
                    <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>
                </div>
            )
        }
    }

    //2.渲染组件标签
    ReactDOM.render(<MyComponent/>, document.getElementById('example'))
</script>
</body>
</html>

转载于:https://www.cnblogs.com/zhanzhuang/p/10704650.html

weixin_30329623

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
09_组件三大属性(3)_refs和事件处理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="example"></div>...
复制链接

扫一扫