使用键盘箭头键达到最大值时禁用按钮

Question

当数字input 达到最大值时，我正在尝试禁用按钮。

我可以通过单击按钮来实现这一点，但在使用键盘的上/下箭头键（或输入的隐式箭头）时则不行。

我认为有些基本的东西我不太了解......

function App() {
  const [value, setValue] = React.useState(0);
  const max = 5;

  function handleClick() {
    setValue((v) => +v + 1);
  }

  function handleChange(event) {
    const { value } = event.target;
    setValue(() => value);
  }

  return (
    <div className="App">
      <input type="number" value={value} onChange={handleChange} max={max} />
      <button type="button" onClick={handleClick} disabled={value === max}>
        increase
      </button>
      <p>Button will disable at 5 when clicking `increase` button,<br /> but not when using keyboard arrow keys (inside input)</p>
    </div>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 1

添加 KeyDown 事件处理程序。我没有为 ArrowDown 和 ArrowUp 添加键码检查

import React from "react";
import "./style.css";

export default function App() {
  const [value, setValue] = React.useState(0);
  const max = 5;

  function handleClick(event) {
    console.log(event);
    if(value === max){
      return;
    }
    setValue(v => +v + 1);
  }

  function handleChange(event) {
    const { value } = event.target;
    setValue(() => value);
  }

  return (
    <div className="App">
      <input
        type="number"
        onKeyDown={e => handleClick(e)}
        value={value}
        onChange={handleChange}
        max={max}
      />
      <button type="button" onClick={handleClick} disabled={value === max}>
        increase
      </button>
      <p>
        Button will disable at 5 when clicking `increase` button,
        <br /> but not when using keyboard arrow keys (inside input)
      </p>
    </div>
  );
}