react的受控组件和非受控组件

2021-09-09 23:31:00 阅读：158 来源： 互联网

标签：受控 username value react pass 组件 event

受控组件就是可以被 react 状态控制的组件
在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和React无关）。但是也可以转化成受控组件，就是通过 onChange 事件获取当前输入内容，将当前输入内容作为 value 传入，此时就成为受控组件。
好处：可以通过 onChange 事件控制用户输入，使用正则表达式过滤不合理输入。

1.受控组件

<!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>
   <div id="test1"></div>
   <!-- 引入React核心库 -->
   <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
   <!-- 引入React-DOM  -->
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
   <!-- 引入babel,将jsx转换为js -->
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
   <script type="text/babel">
    class Demo extends React.Component {
      constructor(props) {
        super(props)
      }
      state = {
        username: '',
        pass: ''
      }
      submitHandler = (event) => {
        event.preventDefault();// 阻止默认事件
        let { username, pass } = this.state
        if (username && pass) {
          console.log(`我叫${username}, 我的${pass}`)
        }
      }
      changeName = (event) => {
        this.setState({
          username: event.target.value
        })
      }
      changePass = () => {
        this.setState({
          pass: event.target.value
        })
      }
      render () {
        return (
          <form onSubmit={ this.submitHandler }>
            <input type="text" onChange={this.changeName}  name="usename"/>
            <input type="password" onChange={this.changePass} name="password"/>
            <button>登录</button>
          </form>
        )
      }
    }
    ReactDOM.render(<Demo/>, document.getElementById('test'))
   </script>
</body>
</html>

非受控组件的写法

<!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>非受控组件</title>
</head>
<body>
  <!-- 准备容器 -->
  <div id="test"></div>
  <div id="test1"></div>
  <!-- 引入React核心库 -->
  <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <!-- 引入React-DOM  -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
  <!-- 引入babel,将jsx转换为js -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
   class Demo extends React.Component {
    handlersubmit = (event) => {
      event.preventDefault(); // 阻止默认事件
      let { username, password } = this
      console.log(`我叫${ username.value }, 我今年${ password.value }`);
    }
     render () {
       return (
         <div>
          <form onSubmit={ this.handlersubmit }>
            用户名：<input type="text"  ref={ c=> this.username = c } name ='username' placeholder="请输入用户名"/>
            密码：<input type="password" ref={ c=> this.password = c } placeholder="密码" name="password"/>
            <button>登录</button>
          </form>
          </div>
       )
     }
   }
   ReactDOM.render(<Demo/>, document.getElementById('test'))
  </script>
</body>
</html>、

标签：受控,username,value,react,pass,组件,event
来源： https://blog.csdn.net/weixin_45664217/article/details/120212288

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react的受控组件和非受控组件