帐户基数：options.password必须是字符串

Question

我调查了一些类似的问题并添加了.value。但总是得到错误：options.password must be a string，即使我转换了密码.value.toString（）。

import React, {Component} from 'react';
import ReactDom from 'react-dom';
import { Accounts } from 'meteor/accounts-base';

class Register extends Component {

  constructor(props) {
     super(props);
     this.handleSubmit = this.handleSubmit.bind(this);
   }

  handleSubmit (event){
    event.preventDefault();
    console.log(this.email.value);
    console.log(this.password.value);
    const res = Accounts.createUser(this.email.value, this.password.value.toString());
    console.log(res);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="form-group">
          <label htmlFor="email">Email:</label>
          <input className="form-control" type="email" ref={(email) => this.email = email}/>
        </div>
        <div className="form-group">
          <label htmlFor="password">Password:</label>
          <input className="form-control" type="password" ref={(password) => this.password = password}/>
        </div>
        <div className="form-group">
          <button type="submit" className="btn btn-primary">Submit</button>
        </div>
      </form>
    );
  }
}

export default Register;

Answer 1

您需要传递一个对象，而不是两个字符串参数：

const res = Accounts.createUser({
  email: this.email.value,
  password: this.password.value,
});

修改 关于您的React组件，使用状态和controlled components是比refs更好的做法：

import React, {Component} from 'react';
import ReactDom from 'react-dom';
import { Accounts } from 'meteor/accounts-base';

class Register extends Component {

  constructor(props) {
     super(props);
     this.state = {
       email: '',
       password: '',
     }

     this.handleSubmit = this.handleSubmit.bind(this);
   }

   handleInputChange(event) {
      const target = event.target;
      const name = target.name;

      this.setState({
        [name]: value,
      });
    }

  handleSubmit (event){
    event.preventDefault();
    const res = Accounts.createUser({
      email: this.state.email,
      password: this.state.password,
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="form-group">
          <label htmlFor="email">Email:</label>
          <input className="form-control" type="email" name="email" onChange={this.handleInputChange} />
        </div>
        <div className="form-group">
          <label htmlFor="password">Password:</label>
          <input className="form-control" type="password" name="password" onChange={this.handleInputChange} />
        </div>
        <div className="form-group">
          <button type="submit" className="btn btn-primary">Submit</button>
        </div>
      </form>
    );
  }
}