Question

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

这是我的代码：

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将服务器上的人员列表存储在一个名为“users”的数组中，该数组由服务器更新。我想在数组运行时更新下拉列表。

编辑：

以下是填充users数组的代码：

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

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

Answer 1

问题是可以＆＃39;吨只需添加到正常的变量和期望反应而奇迹般地知道重新渲染虚拟HTML，即users.push(...)

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

你的api电话需要在一个组件中。

例如，每当用户立即更改时，它将更新render方法，因为我们使用setState并且它将重新呈现新用户。

选择没有值属性。你想要这个选项，可能希望用户成为一个对象。我已经更新了代码。

这只是一个例子。

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}/>
    );
  }
}

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

1 个答案: