說明:借助于 ref,使用原生DOM方式來獲取表單元素的值
ref的作用:獲取DOM 或組件

步驟

1 創(chuàng)建ref對象
?? ?構(gòu)造方法里:
?? ?this.txt = React.createRef()
2 將創(chuàng)建好的ref對象添加到文本框中
??? ?<input type='text' ref={this.txt}/>
3 通過ref獲取到文本框的值
?? ?this.txt.current.value

備注: 這種方式知道就行,大多數(shù)情況還是使用表單的 受控組件來處理

代碼

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

class App extends React.Component {

    constructor() {
        super()
        //創(chuàng)建ref
        this.txt = React.createRef()
    }

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

    render() {
        return (
            <div>
                {/*將創(chuàng)建好的ref對象添加到文本框中*/}
                <input type='text' ref={this.txt}/>
                <button onClick={this.fn}>獲取文本框的值</button>
            </div>

        )
    }

}

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

效果

?