react 获取input 输入框的值

react 获取input 输入框的值
第一种方式 非受控组件获取
第二种方式 受控组件获取

非受控组件获取 ref

import React , {Component} from 'react';
export default class App extends Component{
    search(){
        const inpVal = this.input.value;
        console.log(inpVal);
    }

    render(){
        return(
            <div>
                <input type="text" ref={input => this.input = input} defaultValue="Hello"/>
                <button onClick={this.search.bind(this)}></button>
            </div>
        )
    }
}
使用defaultValue表示组件的默认状态，初始会被渲染一次，后续的渲染"Hello"不起作用,会渲染用户输入的内容；input的值由自己改变。（如果将defaultValue属性改为value属性，则input的值永远为“Hello”，用户输入不起作用。）

 

受控组件 this.setState({})

import React , {Component} from 'react';
export default class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            inpValu:''
        }
    }

    handelChange(e){
        this.setState({
            inpValu:e.target.value
        })
    }

    render(){
        return(
            <div>
                <input type="text" onChange={this.handelChange.bind(this)} defaultValue={this.state.inpValu}/>
            </div>
        )
    }
}