Question

我想在select tag内使用选项渲染餐馆列表，以便用户选择餐馆。

到目前为止我尝试过的事情：

class Banner extends Component {
   this.state = { 
     restaurant: "",
   }

   restaurantlist = () => {
      var res=[]
      var { restaurants } = this.props;
        restaurants = restaurants.filter(rest => {
        return rest.name.toUpperCase().indexOf(this.state.restaurant.toUpperCase()) !== -1 && 
     rest.publish === true })
        console.log(restaurants)
        res = restaurants.map((item) =>   (
        <li key={item.id}>{item.name}</li>))
    return res;
  }

 <input onChange={(e)=>{ const restaurant = e.target.value;
   this.setState({restaurant:restaurant})}} 
   type="text" name="restaurant"  className="res__search"  
   placeholder="Restaurant"
 />

Answer 1

首先，您需要对状态进行一些更正：

this.state = {
  restaurants: [],
  // ...
}

您需要将餐厅作为Array，而不是String。

这是Select/Option与React的基本实现：

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      restaurants: [
        { id: 1, name: 'First' },
        { id: 2, name: 'Second' },
        { id: 3, name: 'Third' }
      ],
      selected: 2,
    };
  }
  
  handleChange = e => {
    this.setState({
      selected: e.target.value,
    })
  }
  
  render() {
    return (
      <div>    
        <select value={this.state.selected} onChange={this.handleChange}>
          {this.state.restaurants.map(x => <option value={x.id}>{x.name}</option>)}
        </select>
        <h4>State:</h4>
        <pre>{JSON.stringify(this.state, null, 2)}</pre>
      </div>
    );
  };
}

React.render(<Test />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.9/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.9/react-dom.min.js"></script>
<div id="app"></div>

注意：

请阅读React documentation，也请看看此example

如何使用选择标签呈现餐厅列表

1 个答案: