react中获取Input的值

大胖娃子

于 2021-01-15 21:16:53 发布

阅读量1.5k

点赞数

文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_48354511/article/details/112688017

版权

本文介绍了React中受控输入框的使用方法，包括不同方式创建ref并获取值，同时对比了非受控输入与受控输入的区别。此外，还探讨了在React中实现样式的不同方案，如行内样式、外部样式、CSS模块化等，并推荐了几个流行的库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ref:

this.refs.box.value（这种写法目前已经被淘汰了）
2)<input ref={ (input)=>{ this.input = input } } /> this.input.value （input 代表input框这个真实元素）
3)this.inp = React.createRef(); <input ref={ this.inp } /> this.inp.current.value
受控输入框和非受控输入框：
所谓的受控或非受，它的是是受状态的控制
默认写一个input框，这个inptu框是非受控。

this.state = {
        name:"wc"
    }
    _change(e){
        this.setState({
            name:e.target.value
        })
    }
    <input value={this.state.name} onChange={e=>this._change(e)}>

在React中写样式的几个方案：

1）行内样式
style = {{ }}
2) 外部样式
把css代码写在外面，在JSX中，使用className使用之
3）CSS的模块化
1) out.module.css .box{ color:red } CSS的模块化命名必须是xxx.module.css
2) import style form “./out.module.css”
3) style.box
4）利用classnames第三方模块，来控制一个className有还是没有
5）css-in-js npm i styled-components -S