@AntonHPL

Как связать ввод в форму с методом в React?

Как выдавать информацию о постах (репозиториях) конкретного пользователя GitHub ${person}, имя которого мы вводим в поле в компоненте с формой (Info.js)?

Другими словами:
как увязать метод fetchPosts, чтобы он вызывался по нажатию на кнопку формы (onSubmit)? Например, в компоненте Info этот метод уже будет называться ReposMethod.

App.js:
import React, { useState, useEffect } from 'react';
import Posts from './components/Posts';
import Pagination from './components/Pagination';
import Info from './components/Info'
import axios from 'axios';
import './App.css';

const App = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(10);

  useEffect(() => {
    const fetchPosts = async (event) => {
      setLoading(true);
      const res = await axios.get(`https://api.github.com/users/bibeva/repos`);
      setPosts(res.data);
      setLoading(false);
    };

    fetchPosts();
  }, []);

  // Get current posts
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);

  // Change page
  const paginate = pageNumber => setCurrentPage(pageNumber);

  return (
    <div className='container mt-5'>
      <h1 className='text-primary mb-3'>My Blog</h1>
      <Info />
      <Posts posts={currentPosts} loading={loading} />
      <Pagination
        postsPerPage={postsPerPage}
        totalPosts={posts.length}
        paginate={paginate}
      />
    </div>
  );
};

export default App;


Info.js:
import React from 'react';

class Info extends React.Component{
render() {
  return (
    <div>
    <form onSubmit={this.props.reposMethod}>
      <input type="text" name="person"/>
      <button>Получить сведения</button>
    </form>
    </div>
  )
}
}

export default Info;
  • Вопрос задан
  • 80 просмотров
Решения вопроса 1
TNPTSYWWCC
@TNPTSYWWCC
And I Told Them I Invented Times New Roman
Сделай у Info пропс с функцией, которую вызывай, когда происходит submit. Проще говоря сделай кастомное событие у своего компонента.

const Info = ({ onSubmit }) => {
  const handleSubmit = () => {
    // ... another code
    onSubmit():
  };

  return (
    <form onSubmit={handleSubmit}>
      <button>submit</button>
    </form>
  );
}

const App = () => {
  const fetch = () => {};
  const handleSubmit = () => {
    // ...
    fetch();
  };
  
  return <Info onSubmit={handleSubmit} />;
};
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега JavaScript
Уберите эффект.

Функция получения списка репозиториев - пусть получает в качестве параметра имя пользователя:

async function fetchRepos(username) {
  let result = [];

  try {
    result = (await axios.get(`https://api.github.com/users/${username}/repos`)).data;
  } catch(e) {
    console.error(e);
  }

  setRepos(result);
}

Передавайте её в компонент с формой поиска:

<Search onSearch={fetchRepos} />

Внутри которого ей будет передаваться текущее значение из input'а:

function Search({ onSearch }) {
  const [ searchValue, setSearchValue ] = useState('');

  function onSubmit(e) {
    e.preventDefault();
    onSearch(searchValue);
  }

  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        value={searchValue}
        onChange={e => setSearchValue(e.target.value)}
      />
      <button>Найти</button>
    </form>
  )
}

https://jsfiddle.net/2foy6rbw/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы