从 Meteor 数据设置 React 状态

Question

开发者！有谁可以帮助我吗？我正在尝试根据 Meteor 数据在 React 中设置 state 并根据输入编辑此 state 数据，它看起来像

class Profile extends Component{
  constructor(props){
    super(props);
    this.editProfileBind = this.editProfile.bind(this);
    this.testEmailBind = this.testEmail.bind(this); }

  testEmail(e){
    const input = e.target;
    this.setState({
      email: input.value
    });
    input.value = this.state.email;
  }

  editProfile(e){
      e.preventDefault();
  }

  render(){
    return(
         <form className="col-md-4 col-xs-6" 
             onSubmit={this.editProfileBind}>
             <input type="email"
                  onChange={this.testEmailBind}
                  value={this.props.email || ''}
                />
           <button type="submit">Submit</button>
        </form>
   )
 }
}  // end component

export default createContainer(() => {
    const user = Meteor.user();
    const email = user.emails && user.emails[0].address;

    return { email };
}, Profile);

你能建议我如何将 this.state.email 设置为输入而不是 this.props.email 吗？谢谢！

Answer 1

代码的几个问题：

1.使用 props

初始化状态

在构造函数中，您需要将初始状态设置为传入的 email 道具。

2。输入 value 应等于 this.state.email

该值未更新，因为您将值设置为传入的道具（不会更改）而不是 email 状态，您的 testEmail 函数正在更新。

3。使用新道具更新状态

您需要添加一个 componentWillReceiveProps 函数，当新数据传入 Profile 组件时更新您的 email 状态。

Profile 组件应如下所示：

class Profile extends Component{
  constructor(props){
    super(props);
    this.editProfileBind = this.editProfile.bind(this);
    this.testEmailBind = this.testEmail.bind(this); 
    this.state = {
        email: props.email
    }
  }

  testEmail(e){
    const input = e.target;
    this.setState({
      email: input.value
    });
  }

  editProfile(e){
      e.preventDefault();
  }

  componentWillReceiveProps(nextProps){
    this.setState({
        email: nextProps.email
    });
  }

  render(){
    return(
         <form className="col-md-4 col-xs-6" 
             onSubmit={this.editProfileBind}>
             <input type="email"
                  onChange={this.testEmailBind}
                  value={this.state.email}
                />
           <button type="submit">Submit</button>
        </form>
   )
 }
}  // end component

export default createContainer(() => {
    const user = Meteor.user();
    const email = user.emails && user.emails[0].address;

    return { email };
}, Profile);

从 Meteor 数据设置 React 状态

Set React state from Meteor data

state

meteor

reactjs