如何防止搜索栏中的空值发生反应？
如何防止搜索栏中的空值发生反应？
提问于 2019-07-08 13:38:25
因此，我正在构建一个图书查找器的反应使用谷歌图书API。
用户在输入字段中键入他/她要搜索的图书的名称，输入中键入的值被附加到API url的末尾。
基本上，每次用户在输入字段中输入某项内容时，都会调用API，因为我希望在搜索栏下面的下拉列表中显示一些结果。问题是，如果用户点击空字符串spacebar，我将得到一个HTTP 400错误，具体如下：
错误:状态代码400的请求失败 在createError (createError.js:17) 在安顿(settle.js:19) 在XMLHttpRequest.handleLoad (xhr.js:60)
如果我对输入值调用.trim()，那么这只会阻止用户输入任何内容。我有点搞不懂现在该怎么办。另外，每次输入值更改时调用API是否都是一项昂贵的操作？这就是我迄今为止尝试过的：
import React, { Component } from 'react';
import axios from 'axios';
export default class BookSearchForm extends Component {
state = {
searchTerm: ''
};
fetchBooks = () => {
let apiURL = `https://www.googleapis.com/books/v1/volumes`;
axios
.get(`${apiURL}?q=${this.state.searchTerm}`)
.then(res => console.log(res))
.catch(err => console.log(err));
};
onChange = e => {
this.fetchBooks();
this.setState({ searchTerm: e.target.value });
};
render() {
return (
<div className="container">
<form autoComplete="off">
<input
className="search-bar"
type="search"
placeholder="Search for books"
onChange={this.onChange}
value={this.state.searchTerm}
/>
</form>
</div>
);
}
}回答 4
Stack Overflow用户
发布于 2019-07-08 13:44:08
可以使用\s正则表达式替换空白空间。您还可能希望在状态更新后获取(setState的回调)：
onChange = e => {
this.setState(
{ searchTerm: e.target.value.replace(/\s/g, '') },
() => {
this.fetchBooks();
}
);
};.replace(/\s/g, '')将取代所有的空白空间(包括制表符、换行符等)由一个空字符('')从字符串中删除，使用户输入的空白空间什么也不做。
Stack Overflow用户
发布于 2019-07-08 13:46:20
Stack Overflow用户
发布于 2019-07-08 13:50:38
你可以试试下面的代码。
onChange = e => {
let value = e.target.value;
this.fetchBooks(value.trim());
this.setState({ searchTerm: e.target.value });
};
fetchBooks = (str) => {
if (str) {
let apiURL = `https://www.googleapis.com/books/v1/volumes`;
axios
.get(`${apiURL}?q=${str}`)
.then(res => console.log(res))
.catch(err => console.log(err));
}
};是的，每次输入更改都要调用API是很昂贵的。你应该用脱弹法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56936161
复制相关文章
相似问题
腾讯云开发者
