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

2021/9/9 23:34:35

编程Tag： react 组件 value event 受控 pass username

本文主要是介绍react的受控组件和非受控组件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

受控组件就是可以被 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>、

这篇关于react的受控组件和非受控组件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章