TA貢獻1843條經驗 獲得超7個贊
在你的組件中存儲antd Form 的ref （用于訪問提交方法）
添加onKeyUp到表格
tabIndex={0}如果你想 onKeyUp 在整個表單上工作而不僅僅是輸入，你需要添加到表單
輸入 keyCode 為 13，因此您需要像這樣處理 KeyUp：
const SimpleForm = () => {
const ref = useRef();
function handleKeyUp(event) {
// Enter
if (event.keyCode === 13) {
ref.current.submit();
}
}
return (
<Form ref={ref} onKeyUp={handleKeyUp} tabIndex={0}>
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
message: "Please input your username!"
}
]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: "Please input your password!"
}
]}
>
<Input.Password />
</Form.Item>
</Form>
);
};
或者您可以像這樣在窗口上收聽 keyup 事件：
const SimpleForm = () => {
const ref = useRef();
function handleKeyUp(event) {
if (event.keyCode === 13) {
ref.current.submit();
}
}
useEffect(() => {
window.addEventListener("keyup", handleKeyUp);
return () => {
window.removeEventListener("keyup", handleKeyUp);
};
}, []);
return (
<Form ref={ref}>
.
.
.
);
};
TA貢獻1809條經驗 獲得超8個贊
onSubmit在 antd v4 中不可用。改用onKeyPress。
<Form
form={form}
onFinish={console.log}
onKeyPress={(e) => {
if (e.key === "Enter") {
form.submit();
}
}}
>
//
</Form>
TA貢獻1877條經驗 獲得超1個贊
既然你提到了 React，下面的代碼應該在按下時提交表單enter。訣竅是將 onSubmit 屬性添加到表單標簽。
export default class Module extends React.Component {
? constructor() {
? ? super();
? ? this.state = {}
? ? this.handleSubmit = this.handleSubmit.bind(this);
? }
? handleSubmit(e) {
? ? e.preventDefault();
? ? //your code
? }
? render() {
? ? return (
? ? ? <form onSubmit={this.handleSubmit}>
? ? ? ? //form code
? ? ? </form>
? ? );
? }
}
TA貢獻2019條經驗 獲得超9個贊
export default class Module extends React.Component {
constructor() {
super();
this.state = {}
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
//your code
}
render() {
return (
<form onSubmit={this.handleSubmit}>
//form code
// Hide this button using CSS
<button type="submit">Submit</button>
</form>
);
}
也許這會奏效。默認情況下，提交按鈕在 catches enter鍵中，所以你不必做任何激進的事情，只需在表單中放置一個提交按鈕并隱藏該按鈕，在回車鍵上它會自動提交表單。
TA貢獻1772條經驗 獲得超8個贊
你應該在你的輸入中使用 onKeyUp 道具
const handleSubmit = () => {
// function body for submitting data
}
<input
onKeyUp={(ev) => {
if (ev.keyCode === 13) {
handleSubmit();
}
}}
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
舉報