如何验证数组中索引的用户输入React js

import React, { useState } from 'react';

function ArrayIndexValidation() {
  const [inputValue, setInputValue] = useState('');
  const arrayData = ['item1', 'item2', 'item3'];

  const handleValidation = () => {
    const index = parseInt(inputValue);
    if (isNaN(index) || index < 0 || index >= arrayData.length) {
      console.log('Invalid index');
      // 显示错误消息或执行其他无效索引的处理逻辑
    } else {
      console.log('Valid index');
      // 执行有效索引的处理逻辑
    }
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleValidation}>验证索引</button>
    </div>
  );
}

export default ArrayIndexValidation;