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 this.state.value} onChange={this.changeValue} /> // 通过绑定this.state中的值来获取，受控组件
    }
    lookInput() {
        console.log(this.input)
　　　　　console.log(this.refs.username.value) // 直接取相关节点的值
　　}

    render() {
        return (
            

                
受控组件
                {this.geiInput()}
                

                
非受控组件
                this.input}/> // 通过ref的方式来获取，即获取该节点（非受控组件）
                this.lookInput}>提交查看输入框的值

　　　　　　　　　　　　　　 // 非受控组件取值的第二种方式

　　　　　　　　　 // 不需双向绑定时

) } } export default Home 

 

转载于:https://www.cnblogs.com/cazj/p/11107233.html