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

Question

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

我的API端点像这样“http://localhost:8000/api/p_list?search=”。每当用户输入值时，端点就像这样“http://localhost:8000/api/p_list?search=01”，这里输入字段值为“01”。我想获得结果的值。

我可能是reactjs新手。我尝试了下面这样的东西，但这是我想要获取的静态 API url。我不知道如何根据用户输入字段获取动态网址。

如果有人能帮助我解决我想要解决的问题，那就太好了。提前非常感谢您。

./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

您好，请检查这个完整的示例:它使用文本框从用户那里获取用户 ID，单击按钮后，它会使用该用户 ID 调用 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;