react中使用类组件保存input的搜索记录
时间: 2023-11-22 16:57:02 浏览: 90
在React中,可以使用类组件来保存输入的搜索记录。以下是一个简单的例子:
```javascript
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {
searchHistory: []
};
}
handleSearch = (event) => {
event.preventDefault();
const searchTerm = event.target.elements.searchInput.value;
if (searchTerm) {
const searchHistory = [...this.state.searchHistory, searchTerm];
this.setState({ searchHistory });
}
event.target.reset();
}
render() {
return (
<div>
<form onSubmit={this.handleSearch}>
<input type="text" name="searchInput" />
<button type="submit">Search</button>
</form>
<ul>
{this.state.searchHistory.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}
}
```
在这个例子中,我们在组件的构造函数中初始化了一个名为`searchHistory`的数组状态,并在表单的提交事件处理程序中将搜索项添加到该数组中。在`render`方法中,我们通过`map`方法遍历`searchHistory`数组并将每个项渲染为一个列表项。当用户提交表单时,我们使用`event.preventDefault()`方法阻止默认提交行为,并通过`event.target.elements.searchInput.value`获取输入框的值。最后,我们使用ES6的扩展语法将新的搜索项添加到`searchHistory`数组中,并通过`this.setState`方法更新组件的状态。
阅读全文