react中获取Input的值

ref:

1. 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