Reactjs 仅当输入值等于某个数组'；for循环中的s当前值

我有一个数组

["a","b","c","d"]

我有一个输入

        <input value={inputValue} onChange={(e) => onInputChangeHandler(e)}/>

onInputChangeHandler（e）}/>

---

我希望onInputChangeHandler检查键入的字母是否等于数组的第一个元素，如果等于，则使用键入的字母更新输入，如果不等于，则不执行任何操作。然后，当用户键入另一个字母时，我希望OnInputHander检查字母是否等于数组的第二个元素，依此类推。

似乎需要存储数组中的索引

您已经在问题中用文字编写了if/else逻辑，因此您应该能够在onInputChangeHandler中轻松地编写它

一旦有了像

letterIndex

这样的变量，就可以从0开始，并在每次调用onInputChangeHandler时递增它

---

假设React组件中存在此项，则该项将进入组件的状态，并且操作将以与跟踪任何其他状态相同的方式进行。

您所需要的只是

.startsWith（）

。这是实现功能：

const onInputChangeHandler=userInput=>{
设arr=[“a”、“b”、“c”、“d”]；
if（arr.join（“”）.startsWith（userInput））{
log（“更新状态”）；
}否则{
log（'func将在不更新状态的情况下返回'）；
}
}
onInputChangeHandler（“abc”）；
onInputChangeHandler（“abv”）
const TestComponent = () => {
  const myArr = ["a", "b", "c", "d"];
  const [inputValue, setInputValue] = React.useState("");

  function onInputChangeHandler(e) {
    if (myArr[e.target.value.length - 1] === e.target.value.slice(-1)) {
      setInputValue(e.target.value);
    }
  }
  return (
    <div>
      <input value={inputValue} onChange={(e) => onInputChangeHandler(e)} />
    </div>
   );
};

const TestComponent=（）=>{
常量myArr=[“a”、“b”、“c”、“d”]；
常量[inputValue，setInputValue]=React.useState（“”）；
函数onInputChangeHandler（e）{
if（myArr[e.target.value.length-1]==e.target.value.slice（-1））{
设置输入值（如目标值）；
}
}
返回(
onInputChangeHandler（e）}/>
);
};
I想出了
const[letterIndex，setLetterIndex]=useState（0）const onInputChange=（e）=>{if（wordControl[letterIndex]=e.target.value）{setInputValue（e.target.value）setLetterIndex（（prev）=>prev+1）}
第一次调用函数后，一切正常，但下次触发时，例如target.value已经是“ab”和“ab”！==“b”它不是那样工作的。您的代码将始终检查用户键入的字母是否以“a”开头。如果用户在输入中键入字母，
userInput
将从开头接收整个字符串，而不仅仅是输入的字母。所以这将是一场比赛。