react类组件antd的input组件 中只想拿搜索框最后输入的value 而不是输入一个就打印一个
时间: 2024-02-27 21:58:08 浏览: 147
在react项目中使用antd的form组件,动态设置input框的值
好的,您想要获取 Antd Input 组件中搜索框中最后输入的值,而不是每次输入都打印,对吗?那么您可以在 React 类组件中使用 `setState` 方法来记录最后一次输入的值,当用户点击搜索按钮时获取该值。以下是一个简单的示例代码:
```jsx
import React from 'react';
import { Input, Button } from 'antd';
class SearchBox extends React.Component {
state = {
lastInput: '',
};
handleInputChange = (e) => {
this.setState({
lastInput: e.target.value,
});
};
handleSearch = () => {
console.log(this.state.lastInput);
// 在这里执行搜索操作
};
render() {
return (
<div>
<Input onChange={this.handleInputChange} />
<Button onClick={this.handleSearch}>搜索</Button>
</div>
);
}
}
```
在这个示例中,我们在类组件的 `state` 中创建了一个名为 `lastInput` 的状态变量,并将其初始值设置为空字符串。然后,我们定义了两个方法:`handleInputChange` 和 `handleSearch`。`handleInputChange` 方法在搜索框的 `onChange` 事件中被调用,记录最后一次输入的值。`handleSearch` 方法在用户点击搜索按钮时被调用,获取并打印最后一次输入的值。您可以根据实际需求修改这些方法。
阅读全文