框架《React》库的学习笔记（从9到）

九. refs和事件处理
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>refs和事件处理</title>
</head>
<body>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
    <!--这个库是用于限定输入时的数据类型，-->
    <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

    <div id="example"></div>
    <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 () {
            const input = this.refs.content
            alert(this.input.value)
        }

        handleBlur (event) {
            alert(event.target.value)
        }
    

        render (){
            return (
                <div>
                    <input type="text" ref="content"/>&nbsp;&nbsp;
                    <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>
十. 组件组合使用_初始化显示
框架《React》库的学习笔记（从9到）

猜你喜欢
