react input 双向绑定

最新推荐文章于 2023-01-09 15:08:32 发布

阿豪boy

最新推荐文章于 2023-01-09 15:08:32 发布

阅读量92

点赞数

文章标签： vue react css java python

本文链接：https://blog.csdn.net/qq_35516360/article/details/122065751

版权

原文链接: react input 双向绑定

上一篇: react css 模块引入

下一篇: js 模板字符串嵌套

设置input的value，并绑定onChange事件，通过setState修改属性，完成视图更新

可以使用事件或者ref的方式获得输入框的新值

import React, {Component} from 'react';

class App extends Component {

    state = {
        exp: ''
    }

    render() {
        return (
            <div>
                <input ref='input' type="text" value={this.state.exp} onChange={(e) => this.change(e)}/>
                <h2>exp:{this.state.exp}</h2>
            </div>
        );
    }

    change = (e) => {
        this.setState({
            exp:e.target.value
        })
        console.log(this.refs.input.value)
    }
}

export default App;