React 如何使用用户输入过滤结果？

Question

我正在尝试根据 rarity-input 中的输入过滤数据。我发现我应该在我的地图功能上使用但我不知道该怎么做。基本上在rarity-inpupt 用户插入一个值是d.id，它只能returns 1 个对象

<div id='row'>
     <input className="rarity-input"/>
     <div className="rarity-item">
         {props.data
             ? props.data.map((d, i) => (
                   <div className='cards'>
                      <div className="card">
                          <img src={d.image}/>
                               <div className="card-body">
                                   <h2>Santa #{d.id}</h2>
                                   <h3>Rarity score: {d.rarity}</h3>
                               </div>
                       </div>
                   </div>
                  ))
                  : 'Loading...'}
       </div>
 </div>

[编辑]

我正在尝试这样的事情

export const Rarity = (props) => {

    this.state = {
        idTarget : ''
    }

    function updateInput(event) {
        this.setState({idTarget : event.target.value})

    }

    return (
        <div id='rarity' className='text-center'>
            <div className='container'>
                <div className='col-md-8 col-md-offset-2 section-title'>
                    <h2>Rarity</h2>
                    <p>
                        This tool allows you to check the rarity of your Santa by inserting his serial number !
                    </p>
                    <p>
                        (for example you want the rarity of #14, simply insert : 14)
                    </p>
                </div>

                <div id='row'>
                    <label>
                        <input className="rarity-input" onChange={this.updateInput}/>
                    </label>
                    <div className="rarity-item">
                        {props.data
                            ? props.data.filter(...).map((d, i) => (
                                <div className='cards'>
                                    <div className="card">
                                        <img src={d.image}/>
                                        <div className="card-body">
                                            <h2>Santa #{d.id}</h2>
                                            <h3>Rarity score: {d.rarity}</h3>
                                        </div>
                                    </div>
                                </div>
                            ))
                            : 'Loading...'}
                    </div>
                </div>
            </div>
        </div>
    )

}

Answer 1

首先，您必须将用户输入保存在一个状态中，之后您必须根据该状态过滤数据（请记住输入为空的情况它应该呈现完整列表。

注意：由于您是 React 的新手，我试图保持简单，但这是一个丑陋的解决方案，要增强它，您应该使用 useMemo 来保存过滤后的数据，解构您的 props 并尝试保持代码声明性。

import React, { useState } from 'react';

const ComponentName = (props) => {
  const [inputValue, setInputValue] = useState();

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div id="row">
      <input className="rarity-input" value={inputValue} onChange={handleChange} />
      <div className="rarity-item">
        {props.data
          ? props.data
              .filter((item) => (inputValue?.length ? item.id === inputValue : true))
              .map((d, i) => (
                <div className="cards" key={d.id}>
                  <div className="card">
                    <img src={d.image} />
                    <div className="card-body">
                      <h2>Santa #{d.id}</h2>
                      <h3>Rarity score: {d.rarity}</h3>
                    </div>
                  </div>
                </div>
              ))
          : 'Loading...'}
      </div>
    </div>
  );
};

Answer 2

首先，您需要将用户输入存储在如下状态。

const [data ,setData] = useState("");
<input className = "rarity-input" value = {data} onChange = {()=> setData(e.target.value}  />

然后使用这个状态来过滤数据。您可以根据 id 过滤数据，如下所示。

props.data.filter(item => item.id === data)

将此结果保存在任何变量中并映射到 return 语句中的数据。

React 如何使用用户输入过滤结果？

React how to filter the result using the user input?

reactjs

react-props