组件内的标签可以定义ref属性来标识自己
<input ref="input1"/>
获取值:const { input1 } = this.refs; console.log(input.value)
2. 回调形式的ref
<input ref={(c)=>{this.input1 = c}}
获取值:const { input1 } = this; console.log(input.value)
3. createRef创建ref容器
React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是“专人专用”的
myRef = React.createRef()
<input ref={this.myRef}/>
获取值:console.log(this.myRef.current.value)
1) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件(更好的兼容性)
2) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)(高效)
2. 通过event.target得到发生事件的DOM元素对象(不要过度使用ref)
1. 受控组件
在HTML中,标签<input>、<textarea>、<select>的值的改变通常是根据用户输入进行更新。在React中,可变状态通常保存在组件的状态属性中,并且只能使用 setState() 更新,而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况,以这种由React控制的输入表单元素而改变其值的方式,称为:“受控组件”。
1 <script type="text/babel">
2 //创建组件
3 class Login extends React.Component{
4 //初始化状态
5 state = {
6 username:'', //用户名
7 password:'' //密码
8 }
9 //保存用户名到状态中
10 saveUsername = (event)=>{
11 this.setState({username:event.target.value})
12 }
13 //保存密码到状态中
14 savePassword = (event)=>{
15 this.setState({password:event.target.value})
16 }
17 //表单提交的回调
18 handleSubmit = (event)=>{
19 event.preventDefault() //阻止表单提交
20 const {username,password} = this.state
21 alert(`你输入的用户名是:${username},你输入的密码是:${password}`)
22 }
23
24 render(){
25 return(
26 <form onSubmit={this.handleSubmit}>
27 用户名:<input onChange={this.saveUsername} type="text" name="username"/>
28 密码:<input onChange={this.savePassword} type="password" name="password"/>
29 <button>登录</button>
30 </form>
31 )
32 }
33 }
34 //渲染组件
35 ReactDOM.render(<Login/>,document.getElementById('test'))
36 </script>
2. 非受控组件
表单数据由DOM本身处理。即不受setState()
的控制,与传统的HTML表单输入相似,input输入值即显示最新值(使用 ref
从DOM获取表单值)
1 <script type="text/babel">
2 //创建组件
3 class Login extends React.Component{
4 handleSubmit = (event)=>{
5 event.preventDefault() //阻止表单提交
6 const {username,password} = this
7 alert(`你输入的用户名是:${username.value},你输入的密码是:${password.value}`)
8 }
9 render(){
10 return(
11 <form onSubmit={this.handleSubmit}>
12 用户名:<input ref={c => this.username = c} type="text" name="username"/>
13 密码:<input ref={c => this.password = c} type="password" name="password"/>
14 <button>登录</button>
15 </form>
16 )
17 }
18 }
19 //渲染组件
20 ReactDOM.render(<Login/>,document.getElementById('test'))
21 </script>