在反應中從虛擬鍵盤獲取輸入字段中的值

Question

美好的一天，我正在開發一個倒計時手表，它有一個虛擬小鍵盤（在代碼中作為按鈕給出）和三個輸入（小時.分鍾和秒），現在我想要每當我點擊輸入框並輸入虛擬小鍵盤.it 打印僅限該框中的值。

1. 我使用三個 ref 來獲取輸入元素並更改設置它們的值，但不知道如何為特定框設置

const inputOne = useRef(null);
const inputTwo = useRef(null);
const inputThree = useRef(null);

  const changeValue = (val) => {
    inputOne.current.value  = setTime({hour: updatedHour + val, minute: updatedMinute, second: updatedSecond}); 
    inputTwo.current.value = setTime({hour: updatedHour, minute: updatedMinute + val, second: updatedSecond});
    inputThree.current.value = setTime({hour: updatedHour, minute: updatedMinute, second: updatedSecond + val}); 
    }

const changeTime = (e) => {
    setTime({ ...time, [e.target.name]: e.target.value });
  };

2. 這是我使用的輸入字段，updatedHour、updatedMinute 和 updatedSecond 是 setTime state 的一部分。

  <input ref={props.inputOne} onChange={props.changeTime} name="hour"  placeholder="Hour"  value={props.updatedHour} />
          <input ref={props.inputTwo} onChange={props.changeTime} name="minute"  placeholder="Minute" value={props.updatedMinute} />
          <input ref={props.inputThree} onChange={props.changeTime} name="second"  placeholder="Second" value={props.updatedSecond} />

3. 這是創建虛擬鍵盤的按鈕

 <button className="grid-item" tpye='button' onClick={()=> props.changeValue('1')}>1</button>
  <button className="grid-item" tpye='button' onClick={()=> props.changeValue('2')}>2</button>
  <button className="grid-item" tpye='button' onClick={()=> props.changeValue('3')}>3</button>  
  <button className="grid-item" tpye='button' onClick={()=> props.changeValue('4')}>4</button>
  <button className="grid-item" tpye='button' onClick={()=> props.changeValue('5')}>5</button>
  <button className="grid-item" tpye='button' onClick={()=> props.changeValue('6')}>6</button>  
  <button className="grid-item" tpye='button' onClick={()=> props.changeValue('7')}>7</button>
  <button className="grid-item" tpye='button' onClick={()=> props.changeValue('8')}>8</button>
  <button className="grid-item" tpye='button' onClick={()=> props.changeValue('9')}>9</button>  
  <button className="grid-item" tpye='button' >Prev</button>  
  <button className="grid-item" tpye='button' onClick={()=> props.changeValue('0')}>0</button>  
  <button className="grid-item" tpye='button' >Next</button>  

Answer 1

我剛剛復制了您一直在寫的任何內容並將其添加到stackblitz中，並且我已經對其進行了一些更改，鏈接如下，希望您覺得它有用：

鏈接到 stackblitz 以獲得解決方案