Javascript 检测数字输入'；s箭头已被单击

我想知道是否有任何方法可以检测到数字输入的箭头被点击。一旦调用更改事件函数，则单击箭头或使用键盘更改输入值。我想找到一种方法，在只单击箭头时检测更改

这里是一个小链接和它的代码

import React from "react";

export default function App() {
  const [log, setLog] = React.useState("");

  return (
    <div className="App">
      <input
        type="number"
        onChange={e => {
          setLog(log + "+");
        }}
      />
      <br />
      <span>{log}</span>
    </div>
  );
}

从“React”导入React；
导出默认函数App（）{
const[log，setLog]=React.useState（“”）；
返回(
{
setLog（log+“+”）；
}}
/>


{log}
);
}

我认为您无法在箭头上附加事件

尽管可以采取变通办法，但它假定如果prev值和当前值之间的差值为1，则单击了箭头

需要注意的几点：

• 如果用户直接在输入框中键入1，则将首次失败
• 它还将跟踪上下击键

从“React”导入React；
导出默认函数App（）{
const[log，setLog]=React.useState（“”）；
const[prevVal，setPrevVal]=React.useState（0）；
const setLogIfArrowClicked=e=>{
const currentVal=e.target.value；
if（currentVal-prevVal==1）{
setLog（`${log}+`）；
}else if（currentVal-prevVal==-1）{
setLog（`${log}-`）；
}
setPrevVal（currentVal）；
};
返回(


{log}
);
}

我认为这是定制设计的默认箭头，所以我不想添加我的箭头

这是一个使用css制作的箭头的自定义控件示例

const{useState，useffect}=React；
常量NumberInput=（{value，onChange，onUpArrow，onDownArrow}）=>{
返回
onChange（event.target.value）}type=“text”/>
}
函数App（）{
const[log，setLog]=useState（“”）；
const[value，setValue]=useState（0）；
const onChange=（值）=>{
设置值（值）；
}
const onUpArrow=（）=>{
设置值（值=>值+1）；
}
常数onDownArrow=（）=>{
设置值（值=>值-1）；
}
返回(
{log}
);
}
ReactDOM.render(
,
document.getElementById（'root'））
);
.arrow{
边框：纯黑；
边框宽度：0 3px 3px 0；
显示：内联块；
填充：3倍；
位置：绝对位置；
光标：指针；
}
.向上箭头{
变换：旋转（-135度）；
-webkit变换：旋转（-135度）；
边缘顶部：5px；
左边距：-15px；
}
.向下箭头{
变换：旋转（45度）；
-webkit变换：旋转（45度）；
边缘顶部：8px；
左边距：-15px；
}
单击箭头时不会触发任何事件，因此我可以向您推荐以下内容，请参阅

以下是完整的代码：

.css：

.custom-input {
  display: flex;
}

.custom-input > .arrows {
  margin-left: -21px;
}

/*+++++++++ ARROWS +++++++++++++*/
.arrows-component {
  display: inline-block;
}

.arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.arrows button {
  background-color: transparent;
  border: 1px solid transparent; 
}

.arrows button:hover {
  border: 1px solid rgba(0, 0, 0, .24);
}

.arrows button:focus {
  border: 1px solid rgba(0, 0, 0, .24); 
}

.arrow-top {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 3.5px 7px 3.5px;
  border-color: transparent transparent #007bff transparent;
}

.arrow-bottom {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 3.5px 0 3.5px;
border-color: #007bff transparent transparent transparent;
}

.js：

import React，{Component}来自“React”；
从“react dom”导入{render}；
导入“/style.css”；
常量应用=（）=>{
返回(
);
};
常量CustomInput=（）=>{
常量[currentValue，setCurrentValue]=React.useState（0）；
常量handleChanges=e=>{
setCurrentValue（event.target.value.replace（/\D/，“”））；
};
常量topArrowClicked=（e）=>{
setCurrentValue（prevState=>prevState+1）；
}
常量底部箭头单击=（e）=>{
setCurrentValue（prevState=>prevState-1）；
}
返回(
handleChanges（e）}
/>
);
};
常量输入箭头=（{topArrowClick，bottomArrowClick}）=>{
返回(
);
};
render（，document.getElementById（“根”））；

在这里，您可以完全访问在单击顶部和底部箭头时触发的方法，并且可以实现您想要的任何功能（作为一个步骤或不同的行为）。
我认为这是不可能的，也许你可以创建自定义控件并在其上添加事件？你可以添加你自己的自定义箭头吗？或者你绝对需要检查默认箭头吗？@itsanewabstract我使用材质ui的输入，我认为它是自定义设计的默认箭头，所以如果它们使用自定义设计，我不想添加我的箭头，您可以进入节点_模块并修改它们用于渲染它们的代码。您可以在那里附加一个事件侦听器。我不确定有没有更简单的方法solution@itsanewabstract谢谢，但我认为这不是一个好主意。如果在输入中更改步骤，则需要处理该步骤，但这是一个好主意，不需要。假设prevVal为9，如果更改输入，则必须先删除9（将其更改为8/10），这将使当前值为0。“我希望你能明白我的意思。”Siddharth我已经在对我的问题的评论中写过这个方法，但是谢谢。第一点不在我的例子中，因为在页面加载时，我的输入已经有了一个值。
import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  return (
    <div>
      <CustomInput />
    </div>
  );
};

const CustomInput = () => {
  const [currentValue, setCurrentValue] = React.useState(0);

  const handleChanges = e => {
    setCurrentValue(event.target.value.replace(/\D/, ""));
  };

  const topArrowClicked = (e) => {
    setCurrentValue(prevState => prevState + 1);
  }

  const bottomArrowClicked = (e) => {
    setCurrentValue(prevState => prevState - 1);
  }

  return (
    <div className="custom-input">
      <input
        type="text"
        value={currentValue}
        pattern="[0-9]*"
        onChange={e => handleChanges(e)}
      />
      <span className="arrows">
        <InputArrows topArrowClick={topArrowClicked} bottomArrowClick={bottomArrowClicked} />
      </span>
    </div>
  );
};

const InputArrows = ({topArrowClick, bottomArrowClick}) => {

  return (
    <div className="arrows-component">
      <div className="arrows">
        <button onClick={topArrowClick}>
          <div className="arrow-top" />
        </button>
        <button onClick={bottomArrowClick}>
          <div className="arrow-bottom" />
        </button>
      </div>
    </div>
  );
};

render(<App />, document.getElementById("root"));