javascript - react 搜索过滤功能

基本上，我的代码所做的是显示一个名称表列表，顶部有一个搜索栏，可在您输入值时过滤列表。
目前我的代码遇到的问题是向 DisplayTable 组件添加一个 if 语句。我不希望它显示所有存储的数据，而只显示用户在搜索栏 {queryText} 中输入的数据

请忽略 tableData 变量

var InstantBox = React.createClass({
    doSearch:function(queryText){
        console.log(queryText)
        //get query result
        var queryResult=[];
        this.props.data.forEach(function(person){
            if(person.name.toLowerCase().indexOf(queryText)!=-1)
            queryResult.push(person);
        });

        this.setState({
            query:queryText,
            filteredData: queryResult
        })
    },
    getInitialState:function(){
        return{
            query:'',
            filteredData: this.props.data
        }
    },
    render:function(){
        return (
            <div className="InstantBox">
                <h2>Who is Richer?</h2>
                <SearchBox query={this.state.query} doSearch={this.doSearch}/>
                <DisplayTable data={this.state.filteredData}/>
            </div>
        );
    }
});

var SearchBox = React.createClass({
    doSearch:function(){
        var query=this.refs.searchInput.getDOMNode().value; // this is the search text
        this.props.doSearch(query);
    },
    render:function(){
        return <input className="searchbar-edit" type="text" ref="searchInput" placeholder="Search Name" value={this.props.query} onChange={this.doSearch}/>
    }
});

var DisplayTable = React.createClass({
      doSearch:function(queryText){
        console.log(queryText)
        //get query result
        var queryResult=[];
        this.props.data.forEach(function(person){
            if(person.name.toLowerCase().indexOf(queryText)!=-1)
            queryResult.push(person);
        });

        this.setState({
            query:queryText,
            filteredData: queryResult
        })
    },

    render:function(){
        //making the rows to display
        var rows=[];
        this.props.data.forEach(function(person) {
        rows.push(<tr><td>{person.image}</td></tr>)
        rows.push(<tr><td>{person.name}</td></tr>)
        });
        //returning the table
        return(
             <table>
                <tbody>{rows}</tbody>
            </table>
        );
    }
});

var tableData=[
{
    name:'Paul mak',
    image: <img width="50" src="./images/profile_img.png"/>,
},
];

var dataSource=[
{
    name:'Paul mak',
    image: <img width="50" src="./images/profile_img.png"/>,
},
{
    name:'John Doe',
    image : '002'
},
{
    name:'Sachin Tendulkar',
    image : '003'
}];


React.render(
  <InstantBox data={dataSource}/>,
  document.getElementById('content1')
);

最佳答案

尝试这样的事情:

var InstantBox = React.createClass({
    doSearch:function(queryText){
        console.log(queryText)
        //get query result
        var queryResult=[];
        this.props.data.forEach(function(person){
            if(person.name.toLowerCase().indexOf(queryText)!=-1)
            queryResult.push(person);
        });

        this.setState({
            query:queryText,
            filteredData: queryResult
        })
    },
    getInitialState:function(){
        return{
            query:          '',
            filteredData:   undefined
        }
    },

    renderResults: function() {
        if (this.state.filteredData) {
            return (
                <DisplayTable data={this.state.filteredData}/>
            );
        }
    },
    render:function(){
        return (
            <div className="InstantBox">
                <h2>Who is Richer?</h2>
                <SearchBox query={this.state.query} doSearch={this.doSearch}/>
                {this.renderResults()}
            </div>
        );
    }
});

我对您的代码所做的更改是，在您的初始状态下，我将 this.state.filteredData 更改为未定义(实际上您可以完全删除它，但我认为这对您来说现在更清晰)。这样，当您第一次渲染框时，没有 filteredData 并且您的 <DisplayTable /> 不会渲染。只要您从 doSearch 运行 <SearchBox /> 回调，它就会填充 filteredData 并显示它。

要扩展此功能，您还可以检查 this.state.query 何时再次未定义或为空白(例如: this.state.query.length )以在没有查询/没有结果的情况下再次从 dom 中删除 <DisplayTable />。

记住 render 函数仍然只是 javascript。你在 JSX 中用 {} 包装的任何东西都会被评估。我们可以在 render 函数中使用这个逻辑，然后做一些类似 var displayTable = <DisplayTable />; 的事情，然后在返回的 JSX 中包含 {displayTable} ，它会是一样的。我个人更喜欢在不同的功能之间拆分渲染逻辑:)

关于javascript - react 搜索过滤功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31872994/