<!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}/> <button onClick={this.showInput}>提示输入</button> <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/> </div> ) } } //2.渲染组件标签 ReactDOM.render(<MyComponent/>, document.getElementById('example')) </script> </body> </html>
09_组件三大属性(3)_refs和事件处理
猜你喜欢
转载自www.cnblogs.com/zhanzhuang/p/10704650.html
今日推荐
周排行