ReactJS中的搜索过滤器

debugcn 发表于 Dev

赏金

如何使用搜索过滤器：React？

我尝试了下面的方法search effect在reactjs中使用，但是在我的情况下结果没有出现。我认为我在某个地方犯了一个愚蠢的错误，如果有人能弄清楚我要解决的问题，那就太好了。

API端点网址：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;

安h

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;

试试这个兄弟：D

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。