[英]How can I render out to page no results when my search field is empty, but still render asynchronously when searching?
I'm rendering to page a bunch of buttons based on what a user is typing. 我正在根据用户键入的内容来渲染一堆按钮。 Basically the user starts typing and with each letter pressed a new set of buttons is rendered to the page where an obj.content contains the string being typed.
基本上,用户开始输入内容,每按下一个字母,就会在页面上呈现一组新的按钮,其中obj.content包含要输入的字符串。 This is all working fine, but I have one small problem.
一切正常,但我有一个小问题。 When a user first enters the program all of the buttons are rendered out to the page showing all options.
当用户首次进入程序时,所有按钮都会呈现到显示所有选项的页面上。 I would like to show zero buttons if nothing is being searched for.
如果不进行任何搜索,我想显示零按钮。
As of right now the normal state is looking for any matches of '', which every string that is searched contains so every button is rendered out to the screen. 截至目前,正常状态下正在查找''的任何匹配项,搜索到的每个字符串均包含该匹配项,因此每个按钮均呈现到屏幕上。
Is there a way to render out zero buttons if my search fields are empty? 如果我的搜索字段为空,有没有办法呈现出零个按钮?
I have tried... 我努力了...
const RenderSearchResults = () => {
<div>
{renderResults}
</div>
}
const renderResults = this.props.data.filter(obj => {
return obj.content.includes(this.state.keyToFind);
}).map((obj, idx) => {
return (
<button name={obj.name} value={this.state.btnToFind} key={idx}>{obj.title} </button>
)
});
// FROM THE MAIN COMPONENT RETURN
return (
<input type="text name="keyToFind" placeholder="SEARCH" value={this.state.keyToFind} onChange={this.handleChange.bind(this} /> <br />
{this.state.keyToFind !== '' ? <RenderSearchResults /> : console.log("no input")}
)
// THIS WORKS BUT STARTS WITH ALL BUTTONS RENDERED OUT
return (
<input type="text name="keyToFind" placeholder="SEARCH" value={this.state.keyToFind} onChange={this.handleChange.bind(this} /> <br />
{renderResults}
)
However the above method doesn't update when a user starts typing. 但是,当用户开始键入时,上述方法不会更新。 The only way I can get the search / render to work asynchronously is if I just place {renderResults} into the main component return without the if statement checking to see if the search field is empty.
我可以使搜索/渲染异步工作的唯一方法是,如果我只是将{renderResults}放入主组件返回中,而没有if语句检查搜索字段是否为空。 However, this results in all possible buttons being rendered out to page as the normal state.
但是,这导致所有可能的按钮都作为正常状态显示到页面上。
Anyway to start with nothing being rendered out to the page? 无论如何,什么都没有开始呈现给页面?
I created a small example similar to what you are describing but much more simplified. 我创建了一个小示例,与您描述的类似,但更加简化。 Here I am checking if
keyToFind
is empty string and returning an empty array directly from the method that does the rendering. 在这里,我正在检查
keyToFind
是否为空字符串,并直接从执行渲染的方法中返回一个空数组。
class RenderButtons extends React.PureComponent {
state = {
keyToFind: ''
}
renderResults = () => {
if (this.state.keyToFind === '') return [];
const renderResults = ['a', 'b', 'c', 'aa']
.filter(obj => {
return obj.indexOf(this.state.keyToFind) >= 0;
})
.map((obj, idx) => {
return (<button name={obj} value={obj} key={idx}>{obj}</button>)
});
return renderResults;
}
handleChange = (event) => {
this.setState({ keyToFind: event.target.value });
}
render () {
const renderResults = this.renderResults();
return (
<div>
<input type="text" value={this.state.keyToFind} onChange={this.handleChange} />
{renderResults}
</div>
);
}
}
Here is a working example on codesandbox . 这是codeandbox上的工作示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.