Question

基本上我的代码所做的是显示一个名单表格列表，顶部有一个搜索栏，当你输入一个值时，它会过滤列表。我目前在代码中遇到的问题是向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')
);

Answer 1

尝试这样的事情：

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}，它就会一样。我个人更喜欢在不同的函数之间分割渲染逻辑：）

React Search过滤功能

1 个答案: