react非受控组件useRef方法

效果图如下:
react非受控组件useRef方法_第1张图片
代码如下:


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
head>
<body>
  <div id="box">div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">script>
  <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js">script>
  
  <script type="text/babel">
    const {useRef} = React
    function Compont() {
      const username = useRef('初始值可写可不写')
      const password = useRef()
      const handleClick = () => {
        console.log('用户名:' + username.current.value)
        console.log('密码:' + password.current.value)
      }
      return(
        <div>
          用户名:<input type="text" ref={username} /> <br/>
          密码:<input type="password" ref={password} /> <br/>
          <button onClick={handleClick}>点击登入</button>
        </div>
      )
    }
    ReactDOM.render( <Compont/>, document.getElementById('box'))
  script>
body>
html>

你可能感兴趣的:(React)