如何使用ReactJS获取用户输入字段的值？

Question

我正在尝试根据用户输入字段获取api数据。如何获取这些数据的值？

我的apiendpoint如下“http://localhost:8000/api/p_list?search=" . 每当用户输入值时，endpoint如下“http://localhost:8000/api/p_list?search=01这里输入的字段值为“01”。我想得到结果的值。

我可能是新来的反应。我尝试了下面这样的东西，但这是静态API网址我试图获取。

如果有人能帮我解决我要解决的问题，那就太好了。事先非常感谢你。

/src/productList。js

import React, {Component} from "react";
import Contacts from './productListHook.js';


export default class App  extends Component{

   state = {
       contacts: []
   }

   componentDidMount() {
       fetch('http://localhost:8000/api/p_list?search=')
       .then(res => res.json())
       .then((data) => {
         this.setState({ contacts: data })
       })
       .catch(console.log)
     }

   render(){
   return(

       <Contacts contacts={this.state.contacts} />
   )
}
}

/src/ProductListHook。js

import React from 'react'

    const Contacts = ({ contacts }) => {
      return (

        <section class="product_list section_padding">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="product_sidebar">
                        <div class="single_sedebar">
                            <form action="#">
                                <input type="text" name="#" placeholder="Search keyword"/>
                                <i class="ti-search"></i>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-sm-9">
                    <div class="product_list">
                        <div class="row">

                        {contacts.map((contact) => (

                            <div class="col-lg-3 col-md-9">
                                <div class="single_product_item">
                                    <img src={contact.image} alt="" class="img-fluid" />
                                    <h3> <a href={contact.url}>{contact.title}</a> </h3>
                                    <p>From ${contact.price}</p>
                                </div>
                            </div>

                            ))}

                        </div>
                        <div class="load_more_btn text-center">
                            <a href="#" class="btn_3">Load More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </section>

      )
    };

export default Contacts

Answer 1

您的联系人组件具有输入，但API调用是在其父App组件中进行的。

您需要做的是将另一个prop传递给Contacts，这是一个每当Contacts中的输入状态发生变化时都会调用的函数。

例子：

class App extends React.Component {
  ...

  search(inputValue){
    fetch(`http://localhost:8000/api/p_list?search=${inputValue}`)
    .then(res => res.json())
    .then((data) => {
      this.setState({ contacts: data })
    })
    .catch(console.log)
  }

  render() {
    <Contacts contacts={this.state.contacts} onSearch={search}/>
  }

现在在联系人组件中：

const Contacts = ({contacts, onSearch}) => {
  const [search, setSearch] = useState('');
  return (
    ...
    <input onChange={
           (e) => {
            setSearch(search);
            onSearch(e.currentTarget.value);
           }
         } value={search} .../>
    ...
   )
}

我只是编写了概念性代码来使它工作，它缺少了关于您的项目的bind和其他具体实现。

我强烈建议您在onSearch函数中实现一个逻辑来延迟API调用，因为它将在输入中键入的新字母中触发。这会使api过载。

希望能有帮助。

Answer 2

嗨，请检查这个完整的例子：它正在使用文本框从用户那里获取用户标识，点击按钮后，它用该用户标识调用api，并获取该用户的所有帖子。之后，它显示屏幕上的所有帖子标题。

import React, {useEffect, useState} from "react";
import axios from 'axios';

function PostListPageByUser() {
    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(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`, {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
            }).catch(err => {
            console.log(err);
        });
    }
    return (
        <React.Fragment>
            <span>Enter User Id</span>
            <input type="text" onChange={handleChange}/>
            <button onClick={handleClick}>Get Posts By User</button>
            <ul>
                {
                    posts.map(post => <li key={post.id}>{post.title}</li>)
                }
            </ul>
        </React.Fragment>
    );
}
export default PostListPageByUser;

根据您对我的回答的评论，我在表单提交中添加了此示例：

import React, {useEffect, useState} from "react";
import axios from 'axios';

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

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

    function handleSubmit(event) {
        event.preventDefault();
        axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`, {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
            }).catch(err => {
            console.log(err);
        });
    }

    return (
        <form onSubmit={handleSubmit}>
            <span>Enter User Id</span>
            <input type="text" onChange={handleChange}/>
            <button type="submit">Get Posts By User</button>
            <ul>
                {
                    posts.map(post => <li key={post.id}>{post.title}</li>)
                }
            </ul>
        </form>
    );
}

export default PostListPageByUser;