javascript React Input OnChange字段

1dkrff03 于 11个月前发布在 Java

关注(0)|答案(2)|浏览(88)

我正在开发一个React应用程序。我实现了一个输入字段，用户可以在其中输入值。但是，我在这个输入字段中遇到了一个问题。当用户输入时，它会在显示完整的输入（例如“cow”）之前显示中间值，例如“c”和“co”。
我将输入存储为数组的原因是，我在一个循环中生成了多个TextField示例，并且我需要捕获所有输入值。
下面是相关的代码片段：

<TextField
    id="standard-basic"
    label="Standard"
    variant="standard"
    value={inputValue}
    onChange={(e) => {
      handleInputValue(e.target.value); 
    }}
  />

  const [inputValue, setInputValue] = useState([]); 

  const handleInputValue = (inputSubmitted) => {
    setInputValue([...inputValue, inputSubmitted]);

  };

我的目标是存储来自不同TextField的多个输入值，同时确保输入字段只显示最终的完整值，避免显示中间值。
我如何才能实现这种行为？在循环中处理多个输入值？

JavaScript

来源：https://stackoverflow.com/questions/77181173/react-input-onchange-field

2条答案

按热度按时间

wwwo4jvm1#

如果你想保持多个状态不重叠，你可以尝试使用Map而不是Array。

const [inputValue, setInputValue] = useState(new Map())

const handleInputValue = (id, inputSubmitted) => {
    setInputValue((p) => p.set(id, inputSubmitted))
}

// I know your implementation generates the TextField with a loop, but hardcoding 3 examples show the solution works on principle
return (
    <TextField
        id="standard-basic"
        label="Standard"
        variant="standard"
        value={inputValue.get("standard-basic")}
        onChange={(e) => {
            handleInputValue(e.target.id, e.target.value)
        }}
    />
    <TextField
        id="standard-basic1"
        label="Standard"
        variant="standard"
        value={inputValue.get("standard-basic1")}
        onChange={(e) => {
            handleInputValue(e.target.id, e.target.value)
        }}
    />
    <TextField
        id="standard-basic2"
        label="Standard"
        variant="standard"
        value={inputValue.get("standard-basic2")}
        onChange={(e) => {
            handleInputValue(e.target.id, e.target.value)
        }}
    />
)

赞(0）回复(0）举报 12个月前

camsedfj2#

我对你的问题有个主意。尝试使用useRef钩子来存储并在每次接收到onKeyDown事件时更新数组，如下所示：

const ref = useRef([]); 

<TextField
        value={inputValue}
        onKeyDown={(e) => {
            handleInputValue(e.Key); 
        }}/>
const handleInputValue = (inputSubmitted) => {
    ref.current.push(inputSubmitted);
};

useRef是一种帮助您存储值的方法，使其不会被组件重新呈现。
对不起，我的英语很差。

赞(0）回复(0）举报 12个月前

我来回答

javascript React Input OnChange字段

2条答案

相关问题

热门标签

最新问答