[英]get value in input field from virtual keyboard in react
美好的一天,我正在开发一个倒计时手表,它有一个虚拟小键盘(在代码中作为按钮给出)和三个输入(小时.分钟和秒),现在我想要每当我点击输入框并输入虚拟小键盘.it 打印仅限该框中的值。
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 });
};
<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} />
<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>
我刚刚复制了您一直在写的任何内容并将其添加到stackblitz
中,并且我已经对其进行了一些更改,链接如下,希望您觉得它有用:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.