如何使用React钩子从多个输入中随机显示一个值

import React, { useState } from 'react';

const [inputValues, setInputValues] = useState([]);

<input type="text" value={inputValues[0]} onChange={e => handleInputChange(0, e.target.value)} />
<input type="text" value={inputValues[1]} onChange={e => handleInputChange(1, e.target.value)} />
{/* 添加更多的输入元素 */}

const handleInputChange = (index, value) => {
  const newInputValues = [...inputValues]; // 创建一个新的输入值数组
  newInputValues[index] = value; // 更新特定索引的输入值
  setInputValues(newInputValues); // 更新状态变量
};

<button onClick={handleRandomValue}>随机显示一个值</button>

const handleRandomValue = () => {
  const randomIndex = Math.floor(Math.random() * inputValues.length);
  const randomValue = inputValues[randomIndex];
  alert(`随机显示的值为：${randomValue}`);
};

import React, { useState } from 'react';

const RandomValueSelector = () => {
  const [inputValues, setInputValues] = useState([]);

  const handleInputChange = (index, value) => {
    const newInputValues = [...inputValues];
    newInputValues[index] = value;
    setInputValues(newInputValues);
  };

  const handleRandomValue = () => {
    const randomIndex = Math.floor(Math.random() * inputValues.length);
    const randomValue = inputValues[randomIndex];
    alert(`随机显示的值为：${randomValue}`);
  };

  return (
    <div>
      <input type="text" value={inputValues[0]} onChange={e => handleInputChange(0, e.target.value)} />
      <input type="text" value={inputValues[1]} onChange={e => handleInputChange(1, e.target.value)} />
      {/* 添加更多的输入元素 */}
      <button onClick={handleRandomValue}>随机显示一个值</button>
    </div>
  );
};

export default RandomValueSelector;