Question

当前，此代码通过 reactjs显示记录。。现在，我添加了搜索/过滤器文本，以允许用户搜索数据 姓名，年龄和性别。为此，我已经设置了搜索状态，并且还为搜索文本初始化了 handleChange函数 但不知道如何将其连接到 json 记录以使我能够按姓名，年龄和性别搜索记录。有人可以帮我吗？

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>    
<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<script src="build/jquery.min.js"></script>
<div id="app"></div>

<script type="text/babel">

class Application extends React.Component {
  constructor(props) {
    super(props);

 this.state = {value: ''};
this.state = {searchdata: ''};
    this.handleChange = this.handleChange.bind(this);

    this.state = {
      rec: [
        { name: "Tony", Age: "18" , gender: "male" },
        { name: "John", Age: "21" , gender: "female"},
        { name: "Luke", Age: "78" , gender: "male"},
        { name: "Mark", Age: "90" , gender: "female"},
        { name: "Jame", Age: "87" , gender: "female"},
        { name: "Franco", Age: "34" , gender: "male"},
        { name: "Franco", Age: "34" , gender: "male"},
        { name: "Biggard", Age: "19" , gender: "male"},
        { name: "tom", Age: "89" , gender: "female"}
      ],

    };

  }


 handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
  render() {
    return (
      <div >
        <div>
          <h3>Search/Filter Records by name, Age and gender</h3>

<input type="text" placeholder="Search by name, Age and gender"  id="searchdata" name="searchdata" type="text" value={this.state.searchdata} onChange={this.handleChange} />




          <ul>
            {this.state.rec.map((obj, i) => (
              <li key={i}>
                {obj.name} - {obj.Age}  - {obj.gender} 

              </li>
            ))}
          </ul>
        </div>

      </div>
    );
  }
}
ReactDOM.render(<Application />, document.getElementById('app'));


</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


   </body>
</html>

更新部分。

此更新基于先生的解决方案。哈姆扎尔·H。 如果我按照下面的代码实现filterRecord函数

filterRecord = (record)=> (record.name.indexOf(this.state.searchdata) > -1 || 
                           record.Age.indexOf(this.state.searchdata) > -1 || 
                           record.gender.indexOf(this.state.searchdata) > -1)

它将抛出下面的屏幕快照中显示的错误

如果按以下方式实现FilterRecord功能

filterRecord(record) {record.name.indexOf(this.state.searchdata) > -1 || 
                           record.Age.indexOf(this.state.searchdata) > -1 || 
                           record.gender.indexOf(this.state.searchdata) > -1
}

它将显示错误

未捕获的TypeError：未定义不是函数在Array.filter（）在Application.render处（在transform.run（browser.min.js：4）处评估，

以下是完整的实现，但无法使其正常工作

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>
<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<script src="build/jquery.min.js"></script>
<div id="app"></div>

<script type="text/babel">

class Application extends React.Component {
  constructor(props) {
    super(props);

 this.state = {value: ''};
 this.state = {searchdata: ''};


    this.filterRecord = this.filterRecord.bind(this);
     this.handleChange = this.handleChange.bind(this);
    this.state = {
      rec: [
        { name: "Tony", Age: "18" , gender: "male" },
        { name: "John", Age: "21" , gender: "female"},
        { name: "Luke", Age: "78" , gender: "male"},
        { name: "Mark", Age: "90" , gender: "female"},
        { name: "Jame", Age: "87" , gender: "female"},
        { name: "Franco", Age: "34" , gender: "male"},
        { name: "Franco", Age: "34" , gender: "male"},
        { name: "Biggard", Age: "19" , gender: "male"},
        { name: "tom", Age: "89" , gender: "female"}
      ],

    };

  }


 handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
filterRecord = (record)=> (record.name.indexOf(this.state.searchdata) > -1 || 
                           record.Age.indexOf(this.state.searchdata) > -1 || 
                           record.gender.indexOf(this.state.searchdata) > -1)
/*
filterRecord(record) {record.name.indexOf(this.state.searchdata) > -1 || 
                           record.Age.indexOf(this.state.searchdata) > -1 || 
                           record.gender.indexOf(this.state.searchdata) > -1
}
*/

  render() {
    return (
      <div >
        <div>
          <h3>Search/Filter Records by name, Age and gender</h3>

<input type="text" placeholder="Search by name, Age and gender"  id="searchdata" name="searchdata" type="text" value={this.state.searchdata} onChange={this.handleChange} />
<ul>
{
     this.state.rec.filter(this.filterRecords).map((obj, i) => 
          (
            <li key={i}>
              {obj.name} - {obj.Age}  - {obj.gender} 

             </li>
          )
      )
}

 </ul>
        </div>

      </div>
    );
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


   </body>
</html>

Answer 1

您必须过滤rec数组以仅显示与搜索文本匹配的元素：

过滤器功能可能如下所示：

filterRecords = (record)=> (record.name.indexOf(this.state.searchdata) > -1 || 
                           record.Age.indexOf(this.state.searchdata) > -1 || 
                           record.gender.indexOf(this.state.searchdata) > -1)

然后在映射之前使用过滤器功能以仅显示匹配的元素

{
     this.state.rec.filter(this.filterRecords).map((obj, i) => 
          (
            <li key={i}>
              {obj.name} - {obj.Age}  - {obj.gender} 

             </li>
          )
      )
}

在Reactjs应用中实现FilterText或Search输入

1 个答案: