Автозаполнение ReactJS / Redux НЕ изменяет значение поиска - PullRequest
Новая
       7

Автозаполнение ReactJS / Redux НЕ изменяет значение поиска

0 голосов
/ 18 марта 2020

Я пытаюсь сделать заголовок кнопки mov ie, нажатой, чтобы быть входным значением в поиске. exapmle: искал "Бэтмен", щелкнул по результату "Бэтмен ниндзя", поисковый ввод становится "Бэтмен ниндзя" Компонент поиска: handleSelect - это функция, которую я передаю каждому результату поиска. 

class MoviesSearch extends Component {
  state = { 
    display: false,
    title: ''
  };

  handleChange = e => {
    this.props.movieSearch(e.target.value);
    this.setState({
      display: false
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const { searchInput } = this.props;
    this.props.fetchMovie(searchInput);
    this.setState({
      display: true
    });
  };

  handleSelect = e => {
    // this.setState({title: e.target.value})
    // this.setState({title: e.target.value})
    // this.setState({display: false, title: this.props.movies.Title})
    // this.props.movieSearch(this.state.title)
  }

  render() {
//////////////////////////////////////////
////STATE:    
    const { movies } = this.props;
//////////////////////////////////////////
//// BUTTONS:    
    const btnDisabled = (
      <button type="submit" disabled>
        Search
      </button>
    );
    const btnEnabled = <button type="submit">Search</button>;
///////////////////////////////////////////
//// DISPLAY CONTENT:    
    const display = (
      <div className="dropdown-content">
        <MovieList select={this.handleSelect}/>
      </div>
    );
///////////////////////////////////////////   
console.log(this.state.title) 
    return (
      <div className="movieSearch">
        <form className="searchForm" onSubmit={this.handleSubmit}>
          <div
            className={movies.length === 0 ? "dropdown" : "dropdown is-active"}
          >
            <input
              type="text"
              placeholder="Enter Movie Name"
              onChange={this.handleChange}
              value={this.props.movies.Title}
            />
            <div className="dropdown-menu">
              {this.state.display ? display : null}
            </div>
            {this.props.searchInput.length <= 0 ? btnDisabled : btnEnabled}
          </div>
        </form>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  searchInput: state.movies.searchInput,
  movies: state.movies.movies
});

export default connect(mapStateToProps, { movieSearch, fetchMovie })(
  MoviesSearch
);

Компонент MovieItem: selectedItem - переданная функция (handleSelect) 

const MovieItem = ({ movie, selectedItem }) => {

  return (
    <NavLink className="dropdown-item" to="#" onClick={(e)=>selectedItem(e.movie.Title)}>
      <img
        className="poster"
        src={movie.Poster === "N/A" ? "" : movie.Poster}
        alt=""
      />
      <span className="title">{movie.Title}</span>
    </NavLink>
  );
};

export default MovieItem;

1 Ответ

0 голосов
/ 18 марта 2020

В MovieItem компоненте используйте onClick={(e)=>selectedItem(movie.Title)}

В родительском компоненте используйте 

handleSelect = value => {
    this.setState({title: value})
}
...