如何使用来自州的选项呈现下拉列表

Question

我想显示一个动态下拉列表，但我对如何做到有点困惑。

我想迭代我的用户，如：

users.map((user) => {
}

我是否必须创建另一个函数才能执行此操作，还是可以在单个函数中完成所有操作？

_renderDropdown() {
   const { users } = this.props;

   return (
      <select name="userDdl" onChange={::this._onSelectedUserChange}>
      </select>
   );

}

_onSelectedUserChange(e) {
   console.log('user selected change called...');
}

Answer 1

你可以这样做：

<select name="userDdl" onChange={::this._onSelectedUserChange}>
 {users.map(user => (
  <option key={user.id} value={user.id}>{user.name}</option>
 ))}
</select>

Answer 2

这是一个最小的例子：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = {
    users: ["Elon", "Steve", "Bill"]
  };

  renderOptions() {
    return this.state.users.map(u => {
      return <option value={u}>{u}</option>;
    });
  }

  render() {
    return <select options>{this.renderOptions()}</select>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CodeSandbox qazswpoi。

Answer 3

您可以选择放置逻辑的位置。要根据用户呈现选项，您可以这样做：

here