javascript - 搜索过滤器在 React.js 中不起作用

Question

这是 index.jsx 的第一个组件

这是包含所有数据的数组。

    let details=[{
    id:'1',
    website: 'amazon',
    username:'harry',
    password: '1234'
   },
 {
  id:'2',
website: 'flipkart',
username:'nowag',
password: 'gfjh'
},
 {
  id:'3',
website: 'skype',
username:'king',
password: 'yesyes'

 },
 {
  id:'4',
website: 'facebook',
username:'deep',
password: 'hellohello'

  }];

类应用从这里开始

 class  App extends React.Component{

constructor(props) {
    super(props);
    this.state= {
        filter: null
    };
}

setFilter(filter) {
    this.setState({filter: filter})
   }

      render(){

这里出现错误“无法读取未定义的属性‘过滤器’”

      let filteredPassword = this.props.details.filter(
          (detail) =>{
              return detail.website.toLowerCase().indexOf(this.state.search)!= -1;
          }
      );

       return (

      <ul>
          <Filter onUpdateFilter={this.setFilter} />
          {
              filteredPassword.map((detail)=>{
               return <Detail item={detail} key={detail.id} />
          })}

      </ul>

         )
       }
     }



      export default App;

现在多了一个组件filter.jsx

   class Filter extends React.Component{

   constructor(props) {
    super();
    this.state= {
        search:'Search'
    };
   }



    updateSearch(event) {
       this.setState({search: event.target.value.substr(0,40)});
       //this.props.onUpdateFilter(event.target.value.substr(0,40))
     }

    render() {

    return (
        <div>
            <input type="text" defaultValue={this.state.search} onchange={this.updateSearch.bind(this)}/>
        </div>
      )
    }
  }

这是方法，我尝试运行我的过滤器，但它不起作用

Answer 1

你的代码应该是这样的:

class  App extends React.Component{

constructor(props) {
    super(props);
    this.state= {
        filter: null
    };
    this.setFilter = this.setFilter.bind(this);
}

setFilter(filter) {
    this.setState({filter: filter})
   }

      render(){
      let filteredPassword = this.props.details.filter(
          (detail) =>{
              return detail.website.toLowerCase().indexOf(this.state.search)!= -1;
          }
      );

       return (

      <ul>
          <Filter onUpdateFilter={this.setFilter} />
          {
              filteredPassword.map((detail)=>{
               return <Detail item={detail} key={detail.id} />
          })}

      </ul>

         )
       }
     }



      export default App;


class Filter extends React.Component{

   constructor(props) {
    super(props);
   }

    updateSearch(event) {
       this.props.onUpdateFilter(event.target.value.substr(0,40))
     }

    render() {

    return (
        <div>
            <input type="text" defaultValue="Search" onchange={this.updateSearch.bind(this)}/>
        </div>
      )
    }
  }