react数据双向绑定（记录）

Posted 2021-03-06 yangisme

class DataBinding extends React.Component {
    constructor() {
        super()
        this.state = {
            userName: ‘双向绑定‘
        }
    }
    // --------------- e.target
    inputChange = e => {
        this.setState({
            userName: e.target.value
        })
    }
    getData = () => {
        alert(this.state.userName)
    }
    // ---------------- ref
    inputCha =() => {
        let val = this.refs.username.value
        this.setState({
            userName: val
        })
    }
    getUser = () => {
        alert(this.state.userName)
    }
    render() {
        return (
            <div>
                <input value={this.state.userName} onChange={this.inputChange}></input>
                <button onClick={this.getData}>点击获取</button>
                <p>{this.state.userName}</p>
                <input ref="username" value={this.state.userName} onChange={this.inputCha}/>
                <button onClick={this.getUser}>点击获取</button>
            </div>
        )
    }
}