如何为 ReactJs 下拉菜单动态创建选项？答案

【问题标题】：How do I dynamically create options for a ReactJs dropdown menu?如何为 ReactJs 下拉菜单动态创建选项？
【发布时间】：2016-12-23 07:08:50
【问题描述】：

我正在尝试更新现有的 React 选择（下拉菜单）以包含当前在服务器上的所有用户。我在服务器上有一个包含所有用户的数组，当数组更新时，我无法让我的下拉列表更新。

这是我的代码：

class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    socket.emit('join', {room: this.state.value});
    this.setState({value: event.target.value});
    alert('People on server: ' + this.state.value);
    event.preventDefault();
  }

  handleSubmit(event) {
    //not really using this
    event.preventDefault();
  }
  

  render() {
    return (
      <form onChange={this.handleChange}>
        <label>
          Pick your favorite La Croix flavor:
          <select id="userlist" value={this.state.value} onChange={this.handleChange}>
            {this.props.list.map((name) => <option>{name}</option>)}
          </select>
        </label>
        
      </form>
    );
  }
}


class Login extends React.Component {
  render() {
    return (
      <div className="login">
          <NameForm />
          <UserList list={users} />
          <Chat />
          <ChatInput />
      </div>
    );
  }
}

我对 React 很陌生，我不明白如何通过外部请求（在本例中为服务器）获取要更新的元素。现在，我的 javascript 将服务器上的人员列表存储在一个名为“用户”的数组中，该数组由服务器更新。我希望下拉列表在数组更新时更新。

编辑：

这是填充用户数组的代码：

socket.on('update_list', function(msg) {
  users.push(msg.data);
});

用户数组在服务器调用'update_list'后肯定会更新。我在调用之后打印了 users 中的值，当新用户登录时，用户会相应地更新。

【问题讨论】：

因此，您将 users 数组传递到 UserList 中。您可以发布填充users 数组的代码吗？听起来你在上面错误地使用了setState。
我编辑了我的原始帖子以显示填充users 数组的一点点javascript。我遗漏了声明 users 的位置，但是 react 元素和套接字函数都可以全局访问它。您能否详细说明使用setState。我不确定如何正确使用它。

标签： javascript reactjs flask

【解决方案1】：

问题是你不能只添加到一个普通变量并期望 React 神奇地知道重新渲染虚拟 html，即users.push(...)。

setState 是你想要的功能。调用此函数后，它会更新自身及其子组件的渲染方法。

您的 api 调用需要在组件中。

例如，现在每当用户更改时，它都会更新渲染方法，因为我们使用setState，它会重新渲染新用户。

Select 没有 value 属性。你希望这个选项，并且可能希望用户成为一个对象。我已经更新了代码。

这只是一个例子。

class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    socket.emit('join', {room: this.state.value});
    this.setState({value: event.target.value});
    alert('People on server: ' + this.state.value);
    event.preventDefault();
  }

  handleSubmit(event) {
    //not really using this
    event.preventDefault();
  }


  render() {
    return (
      <form onChange={this.handleChange}>
        <label>
          Pick your favorite La Croix flavor:
          <select id="userlist" onChange={this.handleChange}>
            {this.props.users.map(user => <option value={user.value}>{user.name}</option>)}
          </select>
        </label>

      </form>
    );
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.getUsers = this.getUsers.bind(this);

    this.state = {
        users: {}
    }
  }
  componentDidMount() {
    this.getUsers();
  }

    getUsers() {
        socket.on('update_list', function(msg) {
          this.setState({users: msg.data});
        }.bind(this));
    }
  render() {
    return (
        <UserList users={this.state.users}/>
    );
  }
}

【讨论】：