Question

我正在尝试使用react过滤列表，但令人惊讶的是，对于这样一个常见任务，无法在线找到任何帮助我实现此目的。

我有一个用户数组，然后我想要过滤（从名称开始 - 我可以按年龄进行过滤）。该数组位于我的redux商店中，如下所示。

let users = [
  {
    name: 'Raul',
    age: 29
  },
  {
    name: 'Mario',
    age: 22
  }
];

我的整个组件如下所示。

class Test extends Component {

    constructor(props) {
        super(props);

        this.state = {
            users: this.props.users

        };

        this.filterList = this.filterList.bind(this);

    }

    componentWillReceiveProps(nextProps) {

        this.setState({
            users: nextProps.users
        });

    }

    filterList(event) {

        let users = this.state.users;
        users = users.filter(function(user){
        //unsure what to do here
        });
        this.setState({users: users});
    }

  render(){

    const userList = this.state.users.map((user) => {
      return <li>{user.name} {user.age}</li>;
    });

    return(
      <input type="text" placeholder="Search" onChange={this.filterList}/>
      <ul>
        { userList }
      </ul>
    );

  }
}

Answer 1

如果您要对.filter进行过滤，可以将.startsWith与.indexOf或user一起使用，以便为给定用户返回true或false。

您还在onChange事件上设置了一个新的用户列表，这会导致迟早出现一个空数组。在这里，我使用了仅由道具更改的filteredUsers状态，以及在击键发生时更改的class Test extends React.Component { constructor(props) { super(props); this.state = { users: this.props.users, filteredUsers: this.props.users, q: '' }; this.filterList = this.filterList.bind(this); this.onChange = this.onChange.bind(this); } componentWillReceiveProps(nextProps) { this.setState( { users: nextProps.users, filteredUsers: nextProps.users }, () => this.filterList() ); } onChange(event) { const q = event.target.value.toLowerCase(); this.setState({ q }, () => this.filterList()); } filterList() { let users = this.state.users; let q = this.state.q; users = users.filter(function(user) { return user.name.toLowerCase().indexOf(q) != -1; // returns true or false }); this.setState({ filteredUsers: users }); } render() { const userList = this.state.filteredUsers.map(user => { return <li>{user.name} {user.age}</li>; }); return ( <div> <input type="text" placeholder="Search" value={this.state.q} onChange={this.onChange} /> <ul> {userList} </ul> </div> ); } } const userList = [ { name: 'Raul', age: 29 }, { name: 'Mario', age: 22 } ]; ReactDOM.render(<Test users={userList} />, document.getElementById('root'));。

<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>
<div id="root"></div>

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:weightSum="5">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/image01"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:text="Percent Calculator"
        android:textSize="15dp"
        android:layout_weight="3"
        android:id="@+id/btnPCalculator"/>
    <View
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

Answer 2

let datas =[
  {   
      "id":1,
      "title":"Ucat",
      "handle":"mi"
  },
  {
      "id":2,
      "title":"Acat",
      "handle":"csk"
  },
  {
      "id":3,
      "title":"Vcat",
      "handle":"kkr"
  },
  {
      "id":4,
      "title":"Atar",
      "handle":"pkbs"
  }];
const [search, setSearch] =useState(datas);
const handleInputChange = (e) => {
var dm = e.target.value;
var str =dm.toString();
var debug = datas.filter(x=> x["title"].toLowerCase().includes(str));
setSearch(debug);};


<input type="text"  onChange={handleInputChange}/>
{search.map((item)=>(
    <div key={item.id}>
        <ul>
            <li>
            {item.handle} 
            <br/>
            {item.title}
            </li>
        </ul>
    </div>
))};

Answer 3

如果要过滤列表，则必须具有要过滤的条件。例如，您有一个变量let filterAge = 18;

在这种情况下，您可以使用

根据该值过滤用户列表

let users = users.filter(function(user){
    //return all users older or equal to filterAge
    return user.age >= filterAge;        
});

函数的每个结果都等于true，将被添加到users变量中。错误的回报会将其遗漏。你如何确定真/假取决于你。硬编码（不是很有用），简单的等于语句（如上所述）或执行更高数学运算的函数。你的选择。

Answer 4

您还需要一个state变量来存储搜索结果，通过相同数据初始化该变量，一旦用户输入任何内容，将过滤后的数据存储在其中，请尝试：

let users = [
  {
    name: 'Raul',
    age: 29
  },
  {
    name: 'Mario',
    age: 22
  }
];

class Test extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            users: users,
            result: users,
        };

        this.filterList = this.filterList.bind(this);

    }

    componentWillReceiveProps(nextProps) {

        this.setState({
            users: nextProps.users,            
        });

    }

    filterList(event) {
        let value = event.target.value;
        let users = this.state.users, result=[];
        result = users.filter((user)=>{
            return user.name.toLowerCase().search(value) != -1;
        });
        this.setState({result});
    }

  render(){

    const userList = this.state.result.map((user) => {
      return <li>{user.name} {user.age}</li>;
    });

    return(<div>
      <input type="text" placeholder="Search" onChange={this.filterList}/>
      <ul>
        {userList}
      </ul>
      </div>
    );

  }
}

ReactDOM.render(<Test/>, document.getElementById('app'))

<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>


<div id='app'></div>

数组 - Javascript - 使用输入搜索过滤对象数组

4 个答案: