React(三)

表单

同样的还是在app.jsx中引入组件

import FormDemo from "./FormDemo"

并在return返回值中使用组件

<FormDemo />

1.受控组件

FormDemo.jsx

import React from "react"

export default class FormDemo extends React.Component{
    constructor(){
        super();
        this.state ={
            value:""
        }
    }
    handleSubmit =(e)=>{ 
       e.preventDefault();
       console.log(this.state.value);
    }
    onChangeHandler =(e) =>{
        this.setState({
            value:e.target.value
        })
    }
    render(){
        return(
           <div>
                <form onSubmit={this.handleSubmit}>
                    <input type="text"  value={ this.state.value } onChange={ this.onChangeHandler }/>
                    <input type="submit" value="提交"></input>
                </form>
           </div>
        )
    }
}

表单控件会自动提交，所以刷新速度会很快，可以对该事件加上一行代码，e.preventDefault();实现提交但是不会跳转页面。

2.refs和DOM

如果要编写一个非受控组件，而不是为了每个状态更新都编写数据处理函数，可以使用ref来从DOM节点中获取表单数据。

(1)管理焦点，文本选择或者媒体播放

(2)触发强制动画

(3)集成第三方DOM库

RefsAndDom.jsx

import React from "react"

export default class RefsAndDom extends React.Component{
    constructor(){
        super();