有没有一种方法可以使用Ant Design库在InputNumber中包含一个Form.Item，该trigger仅在用户输入数据并按Enter键或单击向上键时才收集数据。向下按钮。
似乎在更改Form.Item上的InputNumber时，import React from "react";
export default class MultipleTextField extends React.Component {
constructor(props) {
super(props);
this.inputArr = ["name", "age", "gender"];
this.inputRefArr = [this.inputArr.length];
this.inputArr.map((input, index) => {
this.inputRefArr[index] = React.createRef();
});
this.state = {values: [this.inputArr.length]};
this.inputRef = React.createRef();
}
onChange = (event, index) => {
// 1. Make a shallow copy of the values
let values = [...this.state.values];
values[index] = event.target.value;
this.setState({values}, () => {
console.log(values, 'values')
});
};
clickHandler = (event) => {
this.inputArr.map((input, index) => {
alert(`${input} is ${this.state.values[index]}`)
})
};
render() {
return (
<form>
{
this.inputArr.map((input, index) => {
return (
<div key={index}>
<label key={index}>
{input}
<input key={index} ref={this.inputRefArr[index]} id="message" type="text"
value={this.state.values[index]}
onChange={(event) => this.onChange(event, index)}/>
</label>
</div>
);
})
}
<input type="button" value="Click Me" onClick={this.clickHandler}/>
</form>
);
}
}
的按钮不再起作用。还有其他方法可以实现吗？
以下是演示该问题的演示：https://codepen.io/medihack/pen/VwvRbpL
答案 0 :(得分：1)
您可以在包装{{1}的onClick组件上监听Form.Item事件，并在向上/时通过引用InputNumber实例以编程方式更改字段值单击向下按钮。在此处查看示例：
https://codesandbox.io/s/cocky-euclid-j73k7?file=/src/App.js
注意：我只想演示向上按钮的这种方法，但是可以轻松地将解决方案扩展到向下按钮。
form