2

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

数字输入箭头

这是一个小演示的链接，它的代码

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>
  );
}
4

3 回答 3

1

我认为您不能在箭头上附加事件。

虽然有一种解决方法是可能的，但它假设如果上一个值和当前值之间的差异为 1，则单击箭头。

有几点需要注意：

  • 如果用户在输入框中直接输入 1，第一次会失败。
  • 它还将跟踪向上和向下的击键。

import React from "react";

export default function 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);
  };

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

于 2020-06-25T19:56:29.860 回答
0

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

不，如果您检查元素，这实际上是浏览器内置输入控件

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

const { useState, useEffect } = React;

const NumberInput = ({value, onChange, onUpArrow, onDownArrow}) => {
  return <div>
    <input value={value} onChange={() => onChange(event.target.value)} type="text"/>
    <div className="arrow arrow-up" onClick={onUpArrow}/>
    <div className="arrow arrow-down" onClick={onDownArrow}/>
  </div>
}

function App() {
  const [log, setLog] = useState("");
  const [value, setValue] = useState(0);

  const onChange = (value) => {
    setValue(value);
  }
  const onUpArrow = () => {
    setValue(value => value + 1);
  }
  const onDownArrow = () => {
    setValue(value => value - 1);
  }

  return (
    <div className="App">
      <NumberInput value={value} onChange={onChange} onUpArrow={onUpArrow} onDownArrow={onDownArrow} />
      <span>{log}</span>
    </div>
  );
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  position: absolute;
  cursor: pointer;
}

.arrow-up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: 5px;
  margin-left: -15px;
}

.arrow-down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-top: 8px;
  margin-left: -15px;
}
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

于 2020-06-25T20:02:25.533 回答
0

单击箭头时不会触发任何事件，因此我可以建议您，请参阅Stackblitz 上的此自定义组件。

这是完整的代码：

.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 } 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"));

在这里，您可以完全访问单击顶部和底部箭头时触发的方法，并且可以实现您想要的任何功能（作为一个步骤或不同的行为）。

于 2020-06-25T20:06:50.673 回答