1.console选中的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="test"></div> <script src="./react-resource/react.development.js"></script> <script src="./react-resource/react-dom.development.js"></script> <script src="./react-resource/babel.min.js"></script> <script src="./react-resource/prop-types.js"></script> <script type="text/babel"> class Person extends React.Component{ showdata=()=>{ console.log(this.refs.input1); } render(){ return ( <div> <input ref="input1" type="text" placeholder="输入姓名"></input> <br/> <button ref="button" onClick={this.showdata}>点击查询</button> </div> ) } } ReactDOM.render(<Person/>,document.getElementById("test")); </script> </body> </html>
2.alert()选中的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="test"></div> <script src="./react-resource/react.development.js"></script> <script src="./react-resource/react-dom.development.js"></script> <script src="./react-resource/babel.min.js"></script> <script src="./react-resource/prop-types.js"></script> <script type="text/babel"> class Person extends React.Component{ showdata=()=>{ const {input1}=this.refs; // 在这个时候只有input1有ref值，所以仅仅选择input1的value值 alert(input1.value) } render(){ return ( <div> <input ref="input1" type="text" placeholder="输入姓名"></input> <br/> <button onClick={this.showdata}>点击查询</button> </div> ) } } ReactDOM.render(<Person/>,document.getElementById("test")); </script> </body> </html>
3.综合写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="test"></div> <script src="./react-resource/react.development.js"></script> <script src="./react-resource/react-dom.development.js"></script> <script src="./react-resource/babel.min.js"></script> <script src="./react-resource/prop-types.js"></script> <script type="text/babel"> class Person extends React.Component{ showdata1=()=>{ const {input1}=this.refs; // 在这个时候只有input1有ref值，所以仅仅选择input1的value值 alert(input1.value) } showdata2=()=>{ const {input2}=this.refs; alert(input2.value) } render(){ return ( <div> <input ref="input1" type="text" placeholder="输入姓名"></input> <br/> <button onClick={this.showdata1}>点击查询左侧的输入内容</button> <br/> <input ref="input2" type="text" onBlur={this.showdata2} placeholder="失去焦点提示"></input> </div> ) } } ReactDOM.render(<Person/>,document.getElementById("test")); </script> </body> </html>
