05-受控/非受控组件（简单了解）

受控组件

表单元素的可变状态通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新

这些值受到 React组件 控制的表单元素称为受控组件

案例代码 1: 文本框

import { useState} from 'react'

export default function App() {
  const [username,setUsername] = useState('')
  
  const handleSetUsername = (e) => {
    setUsername(e.target.value)
  }
  //组件渲染
  return (
    <div>
      <h1>表单元素</h1>
      <p>用户名: <input type="text" value={username} onChange={handleSetUsername} /></p>
      <p>{username}</p>
    </div>
  );
}

案例代码 2: 下拉菜单

import { useState } from 'react'

export default function App(){
  const [city,setCity] = useState('bj')
  const handleSetCity = (e) => {
    setCity(e.target.value)
  }
  //组件渲染
    return (
      <div>
        <h1>表单元素</h1>
        <p>
          城市:
          <select name="city" id="city" value={city} onChange={handleSetCity}>
            <option value="sh">上海</option>
            <option value="zz">郑州</option>
            <option value="bj">北京</option>
          </select>

        </p>
      </div>
    );
}

案例代码 3: 文本域

import { useState } from 'react'

// 父组件
export default function App(){
  const [comment,setComment] = useState('bj')

  const handleSetComment = (e) => {
    setComment(e.target.value)
  }
  //组件渲染
    return (
      <div>
        <h1>表单元素</h1>
        <p>
          <textarea 
            name="comment" 
            id="comment" 
            cols="30" 
            rows="10" 
            value={comment} 
            onChange={handleSetComment}
          ></textarea>
        </p>
      </div>
    );
}

非受控组件

表单数据将交由 DOM 节点来处理，而不是由 React 组件来管理. 这样的表单元素称为非受控组件

案例

import { useRef } from 'react'

export default function App() {

  const inputEl = useRef()

  const getUsername = () => {
    let username = inputEl.current.value;
    console.log(username);
  }
  return (
    <div>
      <h1>表单元素</h1>
      <p>用户名: <input type="text" ref={inputEl} /></p>
      <p><button onClick={getUsername} >获取用户名的数据</button></p>
    </div>
  );
}