选择条件渲染

Question

我对 React 的美妙世界还很陌生。

我有两个输入从呈现选项列表的 API 传递数据。我想将这些选项中的选定输入发送回输入字段中的父项，以显示以供其他搜索。

我尝试将状态向下传递给它们，并以多种方式在“SearchCityList”组件中使用三元和if else 语句可选地呈现它们，但我要么得到两个列表，它们就必须在其中一个之间进行选择将列表加倍以放入每个输入字段中，或者仅将所选值放入一个输入中。将不胜感激任何和所有的建议谢谢！

class Form extends Component {
  state = {
    showComponent: false,
    showComponent2: false,
  };


  // open/close control over SearchCity component box

  openSearch = () => {
    this.setState({ showComponent: true });
  };
  openSearch2 = () => {
    this.setState({ showComponent2: true });
  };
  closeSearch = () => {
    this.setState({ 
      showComponent: false,
      showComponent2: false
    });
  };

  // Passed down cb function to get selected city search in selectCity component

  GoingTo = (flights) => {
    this.setState({ GoingTo: [flights] });
  };
  LeavingFrom = (flights) => {
    this.setState({ LeavingFrom: [flights] });
  };

  render() {
    return (
      <div>
        <form className="form-fields container">
          <div className="inputs">
            <h1>Search for a flight!</h1>
            <div className="depart">
              <input
                onClick={this.openSearch}
                className="flight-search"
                placeholder="Leaving From"
                value={this.state.LeavingFrom}
              ></input>
              <input type="date"></input>
            </div>
            <div className="Returning">
              <input
                onClick={this.openSearch2}
                className="flight-search"
                placeholder="Going To "
                value={this.state.GoingTo}
              ></input>
              <input type="date" placeholder="Returning"></input>
            </div>
          </div>
          <button>Check Flights!</button>
        </form>

        {this.state.showComponent || this.state.showComponent2 ? (
          <SearchCity
          openSearch={this.openSearch}
          openSearch2={this.openSearch2}
            flightSearch={this.state.flightSearch}
            closeSearch={this.closeSearch}
            GoingTo={this.GoingTo}
            LeavingFrom={this.LeavingFrom}
            onSearchSubmission={this.onSearchSubmission}
            closeSearch={this.closeSearch}
          />
        ) : null}
      </div>
    );
  }
}

export default Form;


class SearchCity extends Component {
  state = {
    LeavingFrom: "",
    GoingTo: "",
    search: "",
    flightSearch: [],
  };

  // Search submission / api call
  onSearchSubmission = async (search) => {
    const response = await Axios.get(

      {
        headers: {
          "
          useQueryString: true,
        },
      }
    );
    // set New state with array of searched flight data sent to searchCity component

    const flightSearch = this.setState({ flightSearch: response.data.Places });
  };

  // Callback function to send search/input to parent "Form" component

  submitSearch = (e) => {
    e.preventDefault();
    this.onSearchSubmission(this.state.search);
  };

  //  closeSearch callback function sent from Form component to close pop up search box when X is pressed
  closeSearch = () => {
    this.props.closeSearch();
  };

  render() {
    return (
      <div className="container search-list">
        <form onChange={this.submitSearch}>
          <i className="fas fa-times close-btn" onClick={this.closeSearch}></i>
          <input
            onChange={(e) => this.setState({ search: e.target.value })} //query-search api
            value={this.state.search}
            className="search-input"
            type="text"
            placeholder="Search Locations"
          ></input>
          <div className="search-scroll">
            <SearchCityList
              openSearch={this.props.openSearch}
              openSearch2={this.props.openSearch2}
              LeavingFrom={this.props.LeavingFrom}
              GoingTo={this.props.GoingTo}
              flightSearch={this.state.flightSearch}
            />
          </div>
        </form>
      </div>
    );
  }
}

export default SearchCity;






function SearchCityList({ flightSearch, LeavingFrom, GoingTo }) {
  const renderList = flightSearch.map((flights) => {
    return (
      <div>
        <SelectCityLeaving LeavingFrom={LeavingFrom} flights={flights} />
        <SelectCityGoing GoingTo={GoingTo} flights={flights} />
      </div>
    );
  });

  return <div>{renderList}</div>;
}

export default SearchCityList;

Answer 1

首先，在处理状态时，请确保在 constructor 中进行初始化，并确保将处理程序绑定到此组件实例，因为如果您不这样做，this 将引用处理程序中的其他内容并且你将无法拨打this.setState()。

constructor(props) {
  super(props); // important
  state = {
    // your state
  };
  // make sure to bind the handlers so `this` refers to the 
  // component like so
  this.openSearch = this.openSearch.bind(this);
}