reac笔记_13 form表单元素中 input/defaultValue + useState/useRef

原生html元素

原生html是不存在双向绑定的！以input标签举例说明

input属性

• value：当前表单元素的值
• onchange：失去焦点且值发生改变时触发

示例1

<input type="text" value="111">

上述代码在页面显示结果如下：

示例2

在案例1上稍作修改

  <input id='inputbox' type='text'/>
  <button id="btnbox">点击修改value值</button>
  <script>
    const inputele = document.getElementById('inputbox')
    const btnele = document.getElementById('btnbox')
    // 赋值-在页面显示如案例1
    let inputvalue = '111'
    inputele.value = inputvalue

    // 修改inputvalue值 -> 通过代码修改
    // 页面没有发生变化 -> 不会重新渲染
    btnele.onclick = function(){
   
      inputvalue = '222'
      console.log(inputvalue) // 222
    }

    //修改value值为11111 -> 在页面修改元素的value属性值
    // -> 页面变化，但是inputvalue变量值并没有发生变化
    inputele.onchange = function(e){
   
      console.log(e.targe.value) // 11111
      console.log(inputvalue) // 111
    }
  </script>

• 通过上述案例可以看出页面发生改变不会更改变量的值，变量的值改变不会让页面变化 -> 原生input标签的value属性不存在双向绑定
• 上述代码的赋值

   let inputvalue = '111'
   inputele.value = inputvalue
  

  其实本质就是

  inputele.value = '111'
  

  赋值之后就和原来的 inputvalue属性不存在关联关系了，相当于赋了一个默认值，因此 -> 修改inputvalue属性值不会影响元素的value属性，修改value属性也不会影响inputvalue属性值。

react中

在react中也不存在双向绑定！每次更新页面和值都需要我们自己去调用指定的api来触发。

受控组件与非受控组件

react中form表单元素分为受控组件与非受控组件

属性

react中的input

• defaultValue属性：默认值
• value属性：当前表单元素的值
• onChange: 表单元素值改变时触发

error - input标签value属性使用

• 今天想添加一个input标签，默认值为222，代码如下：

  function Mycomponent(){
       
    return (
      <ul>
        <li><input value=‘222’/></li>
      </ul>
    )
  }
  ReactDOM.render(<Mycomponent />, document.getElementById('test'))
  

• 报错如下
  
  • 错误： 在react中input标签存在value元素则表示元素为受控组件，需要添加onChange方法
  • 原因： 在react中 没有 添加onChange方法的input标签为只读的，不能添加value 属性。 若是想添加默认值可以 使用 defaultValue属性
• 修正

  function Mycomponent(){
       
    return (
      <ul>
        <li><input defaultValue='222' /></li>
      </ul>
    )
  }
  ReactDOM.render(<Mycomponent />, document.getElementById('test'))
  

示例 - useState

案例1：如上图，表格数据，每次重新获取之后都要更新组件页面，因此需要使用useState hook定义数据

import {
    useState, useEffect } from "react"
import {
    Table } from 'antd' 
export default function UseDefaultValue (){
   
  const columns = [
    {
   
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
   
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
   
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ]  
  const [data,setData] = useState({
   }) // 存储表格数据
  function getList(){
   
    // 模拟接口获取表格数据
    setTimeout(()