zoukankan      html  css  js  c++  java
  • react中获取输入框中值的两种方式——受控组件和非受控组件

    import React, {Component} from 'react';
    
    class Home extends Component {
        constructor(props) {
            super(props)
            this.state = {
                value: ''
            }
            this.input = React.createRef() // 需要在构造器中调用后才可以获取到该节点的值(非受控组件)
            this.lookInput = this.lookInput.bind(this)
        }
      
        changeValue = (event)=>{
            console.log(event.target.value)
            this.setState({
                value: event.target.value // 想双向绑定,改变输入框中的值时必须使用this.setState的方式
            })
        }
        geiInput() {
            return <input type="text" value={this.state.value} onChange={this.changeValue} /> // 通过绑定this.state中的值来获取,受控组件
        }
        lookInput() {
            console.log(this.input)
        
     console.log(this.refs.username.value) // 直接取相关节点的值
      }
        render() {
            return (
                <div>
                    <h3>受控组件</h3>
                    {this.geiInput()}
                    <br/>
                    <h3>非受控组件</h3>
                    <input type="text" ref={this.input}/> // 通过ref的方式来获取,即获取该节点(非受控组件)
                    <button onClick={this.lookInput}>提交查看输入框的值</button>
                  <input type="text" ref="username" /> // 非受控组件取值的第二种方式
             <input type="text" defaultValue="" /> // 不需双向绑定时
     
    </div>  ) } } export default Home 
  • 相关阅读:
    学员操作——隔行变色
    jQuery基础及选择器(1)
    学员操作——组合继承
    JavaScript面向对象
    学员操作——创建继承person的student子类
    学员操作——flower函数
    JavaScript操作DOM(2)
    JavaScript操作DOM(1)
    学员操作——制作秒表定时器
    学员操作——制作5s关闭广告
  • 原文地址:https://www.cnblogs.com/cazj/p/11107233.html
Copyright © 2011-2022 走看看