在 ReactJS 中搜索过滤器

Question

how to use search filter: React?

I tried the below method to use search effect in reactjs but the result is not coming in my case. I think I have made a silly mistake somewhere, it would be great if anybody could figure out what I'm trying to solve is.

API end-point URL: http://localhost:8000/api/v1/post_list?search=test

function PostListSearch() {
  const [posts, setPost] = useState([]);
  const [userId, setUserId] = useState([]);
  let signal = axios.CancelToken.source();

  function handleChange(event) {
    setUserId(event.target.value);
  }

  function handleClick(event) {
    axios
      .get(`http://localhost:8000/api/v1/post_list?search=${userId}`, {
        cancelToken: signal.token
      })
      .then(res => {
        const posts = res.data;
        setPost(posts);
      })
      .catch(err => {
        console.log(err);
      });
  }

  return (
    <React.Fragment>
      <div class="theme-layout">
        <div class="topbar stick">
          <div class="top-area">
            <div class="top-search">
              <form>
                <input
                  type="text"
                  name="search"
                  onChange={handleClick}
                  placeholder="Search keyword"
                />
                <button data-ripple>
                  <i class="ti-search"></i>
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        {posts.map(post => (
          <ul key={post.id}>
            <div class="col-lg-8 col-xl-9">
              <img src={post.image} alt="" class="img-fluid" />
              <h3>{post.title}</h3>
            </div>
          </ul>
        ))}
      </div>
    </React.Fragment>
  );
}

export default PostListSearch;

Answer 1

function PostListSearch() {
  const [posts, setPost] = useState([]);
  const [userId, setUserId] = useState([]);
  let signal = axios.CancelToken.source();

  function handleChange(event) {
    setUserId(event.target.value);
  }

  function handleClick(event) {
    event.preventDefault()
    axios
      .get(`http://localhost:8000/api/v1/post_list?search=${userId}`, {
        cancelToken: signal.token
      })
      .then(res => {
        const posts = res.data;
        setPost(posts);
      })
      .catch(err => {
        console.log(err);
      });
  }

  return (
    <React.Fragment>
      <div class="theme-layout">
        <div class="topbar stick">
          <div class="top-area">
            <div class="top-search">
              <form>
                <input
                  type="text"
                  name="search"
                  onChange={handleChange}
                  placeholder="Search keyword"
                />
                <button data-ripple onClick={handleClick}>
                  <i class="ti-search"></i>
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        {posts.map(post => (
          <ul key={post.id}>
            <div class="col-lg-8 col-xl-9">
              <img src={post.image} alt="" class="img-fluid" />
              <h3>{post.title}</h3>
            </div>
          </ul>
        ))}
      </div>
    </React.Fragment>
  );
}

export default PostListSearch;

try this out bro:D

Answer 2

I believe you can update your map logic and state initialisation as follows. Just copy paste the code as it is and try with both the approaches I have mentioned.

 function PostListSearch() {
  const [posts, setPost] = useState([]);
  const [userId, setUserId] = useState("");  // CHANGE HERE
  let signal = axios.CancelToken.source();

  function handleChange(event) {
    setUserId(event.target.value);
  }

  function handleClick(event) {
    axios
      .get(`http://localhost:8000/api/v1/post_list?search=${userId}`, {
        cancelToken: signal.token
      })
      .then(res => {
        const posts = res.data;
        setPost(posts);
      })
      .catch(err => {
        console.log(err);
      });
  }

  return (
    <React.Fragment>
      <div class="theme-layout">
        <div class="topbar stick">
          <div class="top-area">
            <div class="top-search">
              <form>
                <input
                  type="text"
                  name="search"
                  onChange={handleChange}
                  placeholder="Search keyword"
                />
                <button data-ripple onClick={handleClick}>
                  <i class="ti-search"></i>
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        {
                    posts.map((post) => {<ul key={post.id}>
                        <div class="col-lg-8 col-xl-9">
    
                            <img src={post.image} alt="" class="img-fluid" />
                            <h3>{post.title}</h3>
    
                        </div>
                    </ul>})
                }
      </div>
    </React.Fragment>
  );
}

export default PostListSearch;

Another solution could be to keep initialistion as it is and try to push value in array. For this I have done changes in handleChange method

function PostListSearch() {
      const [posts, setPost] = useState([]);
      const [userId, setUserId] = useState([]);  
      let signal = axios.CancelToken.source();
    
      function handleChange(event) {
let currUser = userId;
currUser.push(event.target.value)
        setUserId(currUser );
      }
    
      function handleClick(event) {
        axios
          .get(`http://localhost:8000/api/v1/post_list?search=${userId}`, {
            cancelToken: signal.token
          })
          .then(res => {
            const posts = res.data;
            setPost(posts);
          })
          .catch(err => {
            console.log(err);
          });
      }
    
      return (
        <React.Fragment>
          <div class="theme-layout">
            <div class="topbar stick">
              <div class="top-area">
                <div class="top-search">
                  <form>
                    <input
                      type="text"
                      name="search"
                      onChange={handleChange}
                      placeholder="Search keyword"
                    />
                    <button data-ripple onClick={handleClick}>
                      <i class="ti-search"></i>
                    </button>
                  </form>
                </div>
              </div>
            </div>
          </div>
    
          <div class="row">
            {
                        posts.map((post) => {<ul key={post.id}>
                            <div class="col-lg-8 col-xl-9">
        
                                <img src={post.image} alt="" class="img-fluid" />
                                <h3>{post.title}</h3>
        
                            </div>
                        </ul>})
                    }
          </div>
        </React.Fragment>
      );
    }
    
    export default PostListSearch;

I believe anyone of the above solution should work.