从react中的虚拟键盘获取输入字段中的值

Question

我正在开发一款倒计时手表，它有一个虚拟数字键盘(代码中以按钮形式给出(和三个输入(小时、分钟和秒(。现在，我希望每当我点击输入框并键入虚拟数字键盘时，它只打印该框中的值。

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状态的一部分

<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的链接