Как я могу сохранить входное значение формы в массив состояний, а затем отобразить искомый термин как элементы jsx в ReactJS? - PullRequest
Новая
       1

Как я могу сохранить входное значение формы в массив состояний, а затем отобразить искомый термин как элементы jsx в ReactJS?

0 голосов
/ 09 мая 2020

Я создаю приложение, которое обращается к API новостей хакеров, возвращает искомые статьи, а затем отображает последние условия поиска под формой поиска как элемент JSX. Я реализовал event.target.value для захвата ввода, который выводится в реальном времени под формой поиска, но он не сохраняется и, конечно, каждый раз, когда вы вводите в поле поиска, он перезаписывает предыдущий поисковый запрос в реальном времени. . Я установил для массива состояний значение event.target.value, и технически он работает, каждый символ отправляется в этот массив. В конце концов, я хочу иметь возможность сохранять условия поиска в состоянии сокращения, которое, как я знаю, не очень полезно, но является обязательным для этого задания. Итак, мой вопрос: как мне получить только последнюю строку, введенную в массив состояний, и затем отобразить ее на странице, одну за другой? Вот мой код:

Приложение. js

import React, { Component } from 'react';
import SearchForm from '../components/SearchForm';
import Card from '../components/Card';
import ArticleDetail from '../components/ArticleDetail'
import { List } from '../components/List';
import { Col, Row, Container } from '../components/Container';
import SearchResult from '../components/SearchResults';
import axios from "axios";
import { connect } from 'react-redux';

class Home extends Component {
  state = {
    result: [], // array that holds the articles
    searchTerm: "",
    array: [] // array that holds the form input
  };

  searchArticles = (query) => {
    axios.get("http://hn.algolia.com/api/v1/search?query=" + query)
   .then(res => {
     this.setState({ result: res.data.hits })
   })
   .catch(err => console.log(err));
 };

  handleInputChange = (event) => {
    this.setState({
      searchTerm: event.target.value,
      array: this.state.array.concat([event.target.value])
    }, () => console.log(this.state.array));
    // console.log("whats happening?")
  };

  handleFormSubmit = event => {
    event.preventDefault();
    this.searchArticles(this.state.searchTerm);
  };

  render() {

    return (
      <Container>
        <Row>
          <Col size="md-8">
            <Card>
            <List>
                 {this.state.result.map(item => (
                   <ArticleDetail
                   key={item.objectId}
                   title={item.title}
                   link={item.url}
                   author={item.author}
                   created={item.created_at}
                 />
                ))}
                </List>
            </Card>
          </Col>
          <Col size="md-4">
            <Card heading="Search">

              <SearchForm
                value={this.state.searchTerm}
                handleInputChange={this.handleInputChange}
                handleFormSubmit={this.handleFormSubmit}
                searchTerm={this.state.searchTerm}
              />
            </Card>
            {this.state.array.map(item => (
            <SearchResult 
            term={this.state.searchTerm} 
              />
            ))}

          </Col>
        </Row>
      </Container>
    );
  }
}
// export default Home;
const mapStateToProps = state => ({

});
export default connect(mapStateToProps)(Home);

SearchForm. js

import React from "react";

const SearchForm = (props)=> (
  <form>
    <div className="form-group">
      <label htmlFor="search">Search:</label>
      <input
        onChange={props.handleInputChange}
        value={props.value}
        name="search"
        type="text"
        className="form-control"
        placeholder="Search For an Article"
        id="search"
      />
      <br />
      <button
        onClick={props.handleFormSubmit}c
        onChange={props.handleInputChange}
        className="btn btn-primary"
      >
        Search
      </button>
    </div>
  </form>
);

export default SearchForm;

SearchResult. js

import React from 'react';

const SearchResult = (props) => {
    return (
        <div>
            <p>{props.term}</p>
        </div>
    )
}

export default SearchResult;
...