javascript - Meteor React 表单选择已选中

Question

我正在使用 Meteor 和 React 并拥有以下组件:

User = React.createClass({
  getInitialState() {
    return { selectValue: this.props.user.roles[0] };
  },
  handleChange( event ) {
    this.setState({ selectValue: event.target.value });
  },
  render() {
    let message ='You selected ' + this.state.selectValue;

    return (
      <tr>
        <td>
          {this.props.user.profile.name.first}
        </td>
        <td>
          {this.props.user.profile.name.last}
        </td>
        <td>
          {this.props.user.emails[0].address}
        </td>
        <td>
          <select name="userRole" value={this.state.selectvalue} onChange={this.handleChange}>
            <option value="admin">Admin</option>
            <option value="manager">Manager</option>
            <option value="employee">Employee</option>
          </select>
          <p>{message}</p>
        </td>
      </tr>
    );
  }
});

getInitalState 中的 this.props.user.roles 是来自数据库的值。除了选择选项没有显示我想要的值之外，该组件正在做我想要的事情。这是屏幕上呈现的内容:

我的问题是如何向选项添加 selected="selected" 以便它代表正确的 Angular 色？

提前非常感谢。

Answer 1

不需要添加selected="selected"，你只是有一个拼写错误。

value={this.state.selectValue}, v -> V