Question

我正在关注正式的Meteor / React教程，以构建基于React的用户注册用户界面（https://www.meteor.com/tutorials/react/adding-user-accounts）。该教程表明我可以使用Blaze包装器构建基于React的用户注册功能：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Template } from 'meteor/templating';
import { Blaze } from 'meteor/blaze';

export default class AccountsUIWrapper extends Component {
  componentDidMount() {
  // Use Meteor Blaze to render login buttons
  this.view = Blaze.render(Template.loginButtons,
    ReactDOM.findDOMNode(this.refs.container));
  }
  componentWillUnmount() {
    // Clean up Blaze view
    Blaze.remove(this.view);
  }
  render() {
    // Just render a placeholder container that will be filled in
    return <span ref="container" />;
  }
}

此包装器允许某人在创建新用户时设置用户名和密码。我想扩展它，以便也可以为新用户指定角色。

Meteor的 Accounts.ui.config 似乎不支持在注册用户界面中包含角色字段的配置选项。我知道我可以使用alanning:roles包为用户分配角色。但是，我很难找到一种方法将alanning:roles包与Blaze包装器集成。

是否可以在Blaze包装器中添加类似下面代码片段的内容？

var id = Accounts.createUser({
    username: username,
    password: password
});

Roles.addUsersToRoles(id, ['admin']);

Answer 1

您应该能够在组件中创建类似于以下内容的自定义方法：

register(event) {
  // Stop the default behavior when the button is clicked
  event.preventDefault();

  // Get the data from the DOM elements and clean it up
  var username = React.findDOMNode(this.refs.username).value.trim();
  var password = React.findDOMNode(this.refs.password).value.trim();
  var role = React.findDOMNode(this.refs.role).value.trim();

  // Set up the user object with the input data
  var options = {
    username: username,
    password: password,
    role: role,
  };

  // Create the new user with the data
  Accounts.createUser(options);

  return false;
}

然后，在您的注册表单中，使用第一个onSubmit = { this.register }元素上的<form>或提交按钮上的onClick = { this.register }呈现注册表单。

如何使用ReactJS

1 个答案: