在 React 中显示具有当前 defaultValue 的计数器 onChange 输入框答案

【问题标题】：Show counter onChange input box with a current defaultValue in React在 React 中显示具有当前 defaultValue 的计数器 onChange 输入框
【发布时间】：2021-12-09 23:29:38
【问题描述】：

如何将值首先从 API 的数据中获取为初始值，然后在用户开始输入或删除文本时更改？

import React, {useState} from 'react'

const MyInput = () => {
  const [counter, setCounter] = useState(0)

  const initial = dataFromApi.length

  const total = 1000

  const counterChange = (e) => {
    setCounter(initial.length + e.target.value.length)
  }

  return(
    <>{counter}/{total}<input defaultValue={dataFromApi} onChange={counterChange}/></>
  )

}

export default MyInput

https://codesandbox.io/s/compassionate-napier-3nekx?file=/src/App.js

【问题讨论】：

标签： javascript reactjs react-hooks dom-events

【解决方案1】：

将初始长度传递给 useState 钩子

const initial = dataFromApi.length
const [counter, setCounter] = useState(initial)

如果您希望 API 数据发生更改，您可以使用 useEffect 挂钩在 API 数据更改时重置长度状态

useEffect(() => {
  setCounter(dataFromApi.length);
}, [dataFromApi.length]);

如果要显示输入文本的当前长度，则无需在 onChange 处理程序中添加初始值

setCounter(e.target.value.length)

【讨论】：