表单项中的输入编号，用于收集有关输入键和向上/向下按钮的数据

Question

有没有办法使用 Ant Design 库在Form.Item中设置一个InputNumber，该仅在用户输入数据并按回车键或单击向上或向下按钮时才收集数据。

似乎在更改Form.Item上的trigger时，InputNumber的按钮不再工作。还有其他方法可以做到这一点吗？

下面是演示问题的演示：https://codepen.io/medihack/pen/VwvRbpL

Answer 1

您可以在包装InputNumber的Form.Item组件上侦听onClick事件，并在单击向上/向下按钮时通过引用form实例以编程方式更改字段值。请参阅此处的示例：

https://codesandbox.io/s/cocky-euclid-j73k7?file=/src/App.js

注意：我只费心为向上按钮演示这种方法，但解决方案可以很容易地扩展到向下按钮。

import React from "react";
import { Form, InputNumber } from "antd";
import "antd/dist/antd.css";
export default class App extends React.Component {
formRef = React.createRef(null);
handleUpClick = (e, ref) => {
const clickedElement = e.nativeEvent.target.getAttribute("aria-label");
if (clickedElement === "up" || clickedElement === "Increase Value") {
const currentValue = ref.current.getFieldValue("number");
ref.current.setFieldsValue({
number: Number(currentValue) + 1
});
}
};
render() {
return (
<Form
onValuesChange={values => console.log("values", values)}
ref={this.formRef}
>
<Form.Item
name="number"
trigger="onPressEnter"
initialValue={0}
onClick={e => this.handleUpClick(e, this.formRef)}
>
<InputNumber />
</Form.Item>
</Form>
);
}
}