代码之家 › 专栏 › 技术社区 › fun joker

如何使用react过滤数据?

reactjs javascript

fun joker · 技术社区 · 7 年前

我已经创建了搜索过滤器,但我不能在搜索输入中键入任何内容,为什么?我已经创建了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>
    )
  }
}

4 回复 | 直到 7 年前

apokryfos 7 年前

你需要确保你正确地利用了国家。

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>
    )
  }
}

amirhaa 7 年前

我认为如果你不需要改变项目,你也可以做下面的工作来简化你的逻辑:

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>
)
}

rijin 7 年前

您需要直接使用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

José Santos 7 年前

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

假设你有这样的输入:

<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”here“indexof(value.toLowercase())”,是因为setState是异步的,您可以在状态过期的情况下访问该代码段。你确信“值”有正确的值。