Question

如何使用React创建一个非常非常简单的下拉列表选项？似乎没什么用。

我有一个数组：var num = [1,2,3,4,5]

功能：

num(e){
 this.setState({selected: e.target.value});
}

在渲染中：

<select option="{num}"  value={this.state.selected} onChange={this.num} />

没有错误消息，没有任何消息。我通常使用npm插件，但我只需要一些基本的东西。

Answer 1

设置option={num}在jsx中不起作用。您需要使用<option>标记：

这样的事情就是你所追求的：

<select name="select" onChange={this.num}>
  {num.map(function(n) { 
      return (<option value={n} selected={this.state.selected === n}>{n}</option>);
  })}
</select>

Answer 2

如果您正在学习React，我相信这已经成为您所要问的重点。这是JSX：

<select name="category" value={category} onChange={event => handleCategoryChange(event.target.value)}>
            <option id="0" >Personal</option>
            <option id="1" >Work</option>
        </select>

这是on change处理程序：

  const [category, setCategory] = React.useState('');

  const handleCategoryChange = (category) => {
     setCategory(category);
     console.log(category);
 }

如何创建简单的React Dropdown

2 个答案: