一、项目准备工作

1.创建、启动、新建相关文件夹及文件

• npx create-react-app react-input
• cd react-input
• yarn start 或 npm start 或 npm run start
• 新建 src/components/CtrlFun.js
• 新建 src/components/UnCtrlFun.js

2.index.js 入口，不动它

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

import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

3.App.js 根组件导入两个函数组件

import React from 'react'
// 导入两个函数组件
import CtrlFun from './components/CtrlFun'
import UnCtrlFun from './components/UnCtrlFun'

class App extends React.Component {
  render() {
    return <div>
      <CtrlFun></CtrlFun>
      <UnCtrlFun></UnCtrlFun>
    </div>
  }
}
export default App

二、获取表单元素的值

法1：使用 useState Hook（类似受控组件）

• 步骤
  1. 导入 useState
  2. 使用 useState 为函数组件提供状态
  3. 设置表单 value 为上面定义的状态
  4. 绑定 onChange 事件,并在回调中通过状态中的第 2 个参数来修改状态值
  5. 通过 e.target.value/checked ,获取表单元素的值

import React, { useState } from 'react'
// ◆  函数组件
const CtrlFun = () => {
    const [txtVal, setVal] = useState('123')
    const [areaVal, setTextVal] = useState('456')
    const [selectVal, setSelectVal] = useState('b')
    const [chkFlag, setChkFlag] = useState(true)

    // ◆1.文本框输入事件
    const changeTxtVal = (e) => {
        console.log(e.target, 'changeVal')
        setVal(e.target.value)

    }
    // ◆2.文本域输入事件
    const changeAreaVal = (e) => {
        console.log(e.target, 'changeVal')
        setTextVal(e.target.value)
    }
    // ◆3.下拉框选中事件
    const changeSelectVal = (e) => {
        console.log(e.target, 'changeVal')
        setSelectVal(e.target.value)
    }
    // ◆4.复选框选中事件
    const changeChkFlag = (e) => {
        console.log(e.target, 'changeVal')
        setChkFlag(e.target.checked)
    }
    // ◆页面渲染(调用)

    return <div style={{ width: '200px', backgroundColor: '#ccc' }}>
        <p>文本框值实时变化：{txtVal}</p>
        <input type="text" value={txtVal} onChange={changeTxtVal} />
        <p>文本域值实时变化：{areaVal}</p>
        <textarea value={areaVal} onChange={changeAreaVal}></textarea>
        <hr />
        <p>下拉菜单值实时变化：{selectVal}</p>
        <select value={selectVal} onChange={changeSelectVal}>
            <option value="a">1</option>
            <option value="b">2</option>
            <option value="c">3</option>
        </select>
        <hr />
        <p>复选框值实时变化：{chkFlag ? 'true' : 'false'}</p>
        <input type="checkbox" checked={chkFlag} onChange={changeChkFlag} />敲代码
    </div>

}
export default CtrlFun

法2：使用 useRef Hook （类似非受控组件）

• 步骤
  1. 导入 useRef
  2. 调用 useRef(初值),得到引用对象
  3. 把 引用对象设置 ref 给任意的 组件/元素
  4. 通过 引用对象.current 获取 组件/元素
  5. 通过 引用对象.current.value/checked 获取 组件/元素 的值

import React, { useState, useRef } from 'react'
// ◆  函数组件
const UnCtrlFun = () => {
    const [txtVal, setTxtVal] = useState('123')
    const [areaVal, setAreaVal] = useState('456')
    const [selectVal, setSelectVal] = useState('b')
    const [chkFlag, setChkFlag] = useState(true)

    const txtRef = useRef(null)
    const areaRef = useRef(null)
    const selRef = useRef(null)
    const chkRef = useRef(null)

    // ◆1.文本框输入事件
    const changeTxtVal = () => {
        console.log(txtRef);
        setTxtVal(txtRef.current.value)
    }
    // ◆2.文本域输入事件
    const changeAreaVal = () => {
        setAreaVal(areaRef.current.value)
    }
    // ◆3.下拉框选中事件
    const changeSelectVal = () => {
        setSelectVal(selRef.current.value)
    }
    // ◆4.复选框选中事件
    const changeChkFlag = () => {
        setChkFlag(chkRef.current.checked)
    }
    // ◆页面渲染(调用)

    return <div style={{ width: '200px', backgroundColor: 'orange' }}>
        <p>文本框值实时变化：{txtVal}</p>
        <input type="text" ref={txtRef} onChange={changeTxtVal} />
        <p>文本域值实时变化：{areaVal}</p>
        <textarea ref={areaRef}  onChange={changeAreaVal}></textarea>
        <hr />
        <p>下拉菜单值实时变化：{selectVal}</p>
        <select ref={selRef}  onChange={changeSelectVal}>
            <option value="a">1</option>
            <option value="b">2</option>
            <option value="c">3</option>
        </select>
        <hr />
        <p>复选框值实时变化：{chkFlag ? 'true' : 'false'}</p>
        <input type="checkbox" ref={chkRef}  onChange={changeChkFlag} />敲代码
    </div>
}
export default UnCtrlFun