react中获取输入框中值的两种方式——受控组件和非受控组件-优快云博客

本文深入探讨了React中的受控组件与非受控组件的区别，展示了如何使用state和props实现受控组件的双向绑定，以及如何利用React.createRef()和ref属性在非受控组件中直接操作DOM。

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

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