当数字输入达到最大值时，我试图禁用按钮。
我可以通过单击按钮来实现，但当使用键盘的向上/向下箭头键（或输入的隐式箭头）时则不行。
我想有些基本的东西我不太明白。。。
null
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>null
将输入类型更改为文本并添加KeyDown EventHandler。我没有为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);
setValue(v => +v + 1);
}
function handleChange(event) {
const { value } = event.target;
setValue(() => value);
}
return (
<div className="App">
<input
type="text"
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>
);
}
