react表单处理之 非受控组件

说明:借助于 ref,使用原生DOM方式来获取表单元素的值
ref的作用:获取DOM 或组件

步骤

1 创建ref对象
    构造方法里:
    this.txt = React.createRef()
2 将创建好的ref对象添加到文本框中
     <input type='text' ref={this.txt}/>
3 通过ref获取到文本框的值
    this.txt.current.value

备注: 这种方式知道就行,大多数情况还是使用表单的 受控组件来处理

代码

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {

    constructor() {
        super()
        //创建ref
        this.txt = React.createRef()
    }

    fn=()=>{
        alert(this.txt.current.value);
    }

    render() {
        return (
            <div>
                {/*将创建好的ref对象添加到文本框中*/}
                <input type='text' ref={this.txt}/>
                <button onClick={this.fn}>获取文本框的值</button>
            </div>

        )
    }

}

ReactDOM.render(<App/>, document.getElementById("root"));

效果