Question

我已经创建了搜索过滤器，但是我无法在搜索输入中键入任何内容，为什么呢？我已经创建了searchTermChanged方法，但是为什么不起作用？当用户在输入字段中键入内容时，应根据标题对项目进行过滤。

代码：

    import Projects from '../../data/projects';

export default class Home extends Component {

  constructor(props) {
    super(props);
    this.state = {
      search: '',
      projects: Projects
    }
  }

  searchTermChanged = (event) => {
    this.setState({ projects: this.state.projects.filter(val => 
      val.title.toLowerCase().indexOf(this.state.search.toLowerCase()) > -1 ) 
    })
  }

  render() {
    return (
      <div>
          <div className="header">
            <div className="md-form mt-0 customsearch">
                <input className="form-control" type="text" placeholder="Search projects" aria-label="Search"
                value={this.state.search}
                onChange={e => this.searchTermChanged(e.target.value)} 
                />
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              {this.state.projects.map((val,index) => (
                <div class="col-3">
                  <Card title={val.title} by={val.by} blurb={val.blurb} 
                  url={val.url} funded={val.funded} backers={val.backers} imgurl={index}/>
                </div>
              ))}
            </div>
          </div>
      </div>
    )
  }
}

Answer 1

您需要确保正确使用状态。

import Projects from '../../data/projects';

export default class Home extends Component {

  constructor(props) {
    super(props);
    this.state = {
      search: '',
      projects: Projects
    }
  }

  searchTermChanged = (search) => {
    this.setState({ 
      //Update the search state here.
       search, 
       //Use the current search state to filter
       projects: this.state.projects.filter(val => 
          val.title.toLowerCase().indexOf(search.toLowerCase()) > -1 ) 
       }
    );
  }

  render() {
    return (
      <div>
          <div className="header">
            <div className="md-form mt-0 customsearch">
                <input className="form-control" type="text" placeholder="Search projects" aria-label="Search"
                value={this.state.search}
                onChange={e => this.searchTermChanged(e.target.value)} 
                />
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              {this.state.projects.map((val,index) => (
                <div class="col-3">
                  <Card title={val.title} by={val.by} blurb={val.blurb} 
                  url={val.url} funded={val.funded} backers={val.backers} imgurl={index}/>
                </div>
              ))}
            </div>
          </div>
      </div>
    )
  }
}

Answer 2

我认为，如果您不需要更改项目，也可以进行以下操作以简化逻辑：

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

render() {
    let {search} from this.state;
    let myProjects = projects.filter((p) => {
      p.title.toLowerCase().indexOf(search.toLowerCase) > -1
    });

return (
  <div>
      <div className="header">
        <div className="md-form mt-0 customsearch">
            <input className="form-control" type="text" placeholder="Search projects" aria-label="Search"
            value={this.state.search}
            onChange={e => this.setState({search: e.target.value})} 
            />
        </div>
      </div>
      <div class="container-fluid">
        <div class="row">
          {myProjects.map((val,index) => (
            <div class="col-3">
              <Card title={val.title} by={val.by} blurb={val.blurb} 
              url={val.url} funded={val.funded} backers={val.backers} imgurl={index}/>
            </div>
          ))}
        </div>
      </div>
  </div>
)
}

Answer 3

您需要直接使用Projects变量进行过滤，否则过滤器更改将搜索现有状态。您需要设置搜索值以反映您输入的内容

searchTermChanged = (event) => {
    console.log(event);
    this.setState({
      projects: Projects.filter(val => 
      val.title.toLowerCase().indexOf(event.toLowerCase()) > -1 ),
      search: event <-- here
    })
  }

stackblitz：https://stackblitz.com/edit/react-fyf7fr

Answer 4

您没有更改“搜索”的状态。

假设您输入的内容如下：

<input type="text" id="whatever" className="whatever" onChange={(event) => props.searchTermChanged(e.target.value)} />

您可以更改方法searchTermChanged

searchTermChanged = (value) => {
this.setState({search: value});
    this.setState({ projects: this.state.projects.filter(val => 
      val.title.toLowerCase().indexOf(value.toLowerCase()) > -1 ) 
    });
  }

您之所以在此处使用“ value”而不是“ this.state.search”的原因是“ indexOf（value.toLowerCase（））”，这是因为setState是异步的，并且您可以到达状态过时的那段代码。并且您确定“值”具有正确的值。

如何使用React过滤数据？

4 个答案: