如何将动态创建的输入元素的输入值存储到反应+打字稿中的一个变量中答案

【问题标题】：How to store input value of dynamically created input element into one variable in react + typescript如何将动态创建的输入元素的输入值存储到反应+打字稿中的一个变量中
【发布时间】：2022-08-18 00:06:22
【问题描述】：

我的逻辑可能看起来有点不对劲，因为我对反应和打字很陌生。我创建了一个输入组件，它根据作为道具进来的单词的长度生成输入元素，当用户键入单词时，我希望能够获取每个输入的值并将它们存储到一个变量中，我试过了连接单个输入元素的输入值，但输出仍然单独出现。谢谢

import React, {useState} from \'react\'

interface Props{
  word: string,
  setScoreHandler: (event: any) => void
}

const Input: React.FC<Props> = ({word, setScoreHandler}) => {
  const [words, setWords] = useState(\'\')
  const textArray = word.split(\'\')

  const appendWord = (e: { target: { value: string } }) => {
    let inputValue = \'\'
    let inputValue1 = inputValue.concat(e.target.value)
    setWords(inputValue1)
    console.log(inputValue1)
  }


  const style: React.CSSProperties = {
    MozBoxShadow :  \"inset 0 0 10px #000000\",
    WebkitBoxShadow : \"inset 0 0 10px #000000\",
    boxShadow :  \"inset 0 0 10px #000000\",
  }
  return (
    <>
    {textArray.map(text => (
      <input style={style} key={text} type=\"text\" maxLength=\"1\" onChange={appendWord} className=\'w-11 h-20 bg-walnut text-center text-3xl rounded-lg ml-3 shadow-inner-lg\'/>
    ))}
    </>
  )
}

export default Input

你试图做什么有点令人困惑，你说的话，但是你分裂成字符，而不是单词。当您说输出单独输出时是什么意思？，如果您指的是每个字符，那么是的，正如我指出的那样，您在每个字符上的拆分-> \'Hi\'.split(\'\') 将是 H 然后 i..
@Keith抱歉混淆，单词被制成一个数组以使输入元素动态等于单词的长度，当用户输入所述单词时，我想尽快将每个输入元素的值存储到一个变量中因为最后一个值被输入到输入元素中

标签： javascript reactjs typescript

【解决方案1】：

首先，console.log(words) 不会为您提供单词的更新值，因为setState 过程有点异步。要跟踪每个输入，您可能需要使用它们的索引。我建议将 jsx 修改为

{textArray.map((text, index )=> (
    <input style={style} key={text} type="text" maxLength="1" onChange={e => appendWord(e, index)} className='w-11 h-20 bg-walnut text-center text-3xl rounded-lg ml-3 shadow-inner-lg'/>
))}

然后修改 appendWord 看起来像：

const appendWord = (e: { target: { value: string } }, index: number) => {
    const newWords = words.split('');
    newWords[index] = e.target.value;
    setWords(newWords.join(''));
  }

要查看新更新的单词，您需要useEffect。

useEffect(() => {
  // would only be logged when words is changed.
  console.log(words);
}, [words])

希望这可以帮助。

【讨论】：