AutoComplete ReactJS / Redux 不改变搜索值

Question

我试图将点击的电影的标题设置为搜索中的输入值。
示例：搜索“蝙蝠侠”，点击结果“蝙蝠侠忍者”，搜索输入变为“蝙蝠侠忍者”

搜索组件： 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;

Answer 1

在MovieItem 组件中，使用onClick={(e)=>selectedItem(movie.Title)}

在你的父组件中，使用

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