Как получить значение поля ввода пользователя, используя ReactJS?

Question

Я пытаюсь получить данные API в соответствии с полем ввода пользователя. Как получить значение этих данных?

моя конечная точка API, как это "http://localhost: 8000 / api / p_list? search = ". всякий раз, когда пользователь вводит значение, конечная точка выглядит так: «http://localhost: 8000 / api / p_list? search = 01 », здесь значение поля ввода равно «01». Я хочу получить значение результата.

Я, вероятно, новичок в reactjs. я попробовал что-то ниже, как это, но это URL-адрес stati c API, что я пытаюсь получить. Я не уверен, как получить динамический c 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

Привет Пожалуйста, проверьте этот полный пример: Он получает идентификатор пользователя от пользователя, используя текстовое поле, и после нажатия кнопки вызывает 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;

В соответствии с вашим комментарием к моему ответу я добавил этот пример с формой submit:

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;

Answer 2

Ваш Contacts компонент имеет входные данные, но вызов 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}/>
  }

Теперь внутри Contacts компонент:

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

Я только что написал концептуальный код, чтобы он работал, в нем отсутствует bind и другая конкретная c реализация вашего проекта.

Я настоятельно рекомендую вам реализовать логику c внутри Функция onSearch для задержки вызова API, потому что он будет вызван новой буквой, набранной во входных данных. Это может привести к перегрузке API.

Надеюсь, это поможет.