Meteor React Form不會改變價值

Question

有點混淆為什么我的輸入不會更新。 基本上，我想要一個個人資料頁面。 該頁面只是一個包含您可以編輯的字段的表單。 如果您已經擁有某些內容的值（名稱等），我希望在用戶使用新值鍵入時自動填充這些值。 我想它與嘗試用“prop”覆蓋值有關，所以我應該把道具放到項目的“狀態”中。 但是，如果我嘗試將狀態設置為props，則他們不會獲取訂閱值。

同樣，目標只是讓頁面加載，人員用戶文檔中的現有值滑入相應的字段，編輯字段並提交更改。 在我嘗試將其設置為道具后，輸入不會更改值。

任何指針將不勝感激。

謝謝

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { getPath } from 'underscore-contrib/underscore.object.selectors';

export default class Profile extends Component {

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

  handleChange(e) {
    this.setState({value: e.target.value});
  }

  handleSubmit(e) {
    e.preventDefault();
    console.log(e);
    console.log(this.refs)

    // verify the fields
  }

  render() {
    return (
      <div className="profile">
        <h1 className="ui header blue">Profile</h1>

        <form onSubmit={this.handleSubmit.bind(this)} className="profile-form ui form">


          <div className="three fields">
            <div className="field">
              <label>First name</label>
              <input type="text" placeholder="First Name" ref="name.firstName" value={this.props.firstName} onChange={this.handleChange}/>
            </div>
            <div className="field">
              <label>Last name</label>
              <input type="text" placeholder="Last Name" ref="name.lastName" value={this.props.lastName} onChange={this.handleChange}/>
            </div>
            <div className="field">
              <label>Nickname</label>
              <input type="text" placeholder="Nickname" ref="name.nickName" value={this.props.nickName} onChange={this.handleChange}/>
            </div>
          </div>

          <div className="two fields">
            <div className="field">
              <label>Phone</label>
              <input type="text" placeholder="xxx.xxx.xxxx" ref="phoneNumber" value={this.props.phone} onChange={this.handleChange}/>
            </div>
            <div className="field">
              <label>Email</label>
              <input type="email" placeholder="you@email.com" ref="email" value={this.props.email} onChange={this.handleChange}/>
            </div>
          </div>

          <div className="four fields">
            <div className="field">
              <label>DOB</label>
              <input type="text" placeholder="YYYY/DD/MM" ref="body.dob" value={this.props.dob} onChange={this.handleChange}/>
            </div>
            <div className="field">
              <label>City</label>
              <input type="text" placeholder="City" ref="address.city" value={this.props.city} onChange={this.handleChange}/>
            </div>
            <div className="field">
              <label>State</label>
              <input type="text" placeholder="State" ref="address.state" value={this.props.state} onChange={this.handleChange}/>
            </div>

          </div>

          <div className="three fields">
            <div className="field">
              <label>Height</label>
              <div className="ui right labeled input">
                <input type="text" placeholder="Enter height" ref="body.height" value={this.props.height} onChange={this.handleChange}/>
                <div className="ui label">in</div>
              </div>
            </div>
            <div className="field">
              <label>Weight</label>
              <div className="ui right labeled input">
                <input type="text" placeholder="Enter weight" ref="body.weight" value={this.props.weight} onChange={this.handleChange}/>
                <div className="ui label">lbs</div>
              </div>
            </div>
            <div className="field">
              <label>Gender</label>
              <input type="text" placeholder="Male..." ref="body.gender" value={this.props.gender} onChange={this.handleChange}/>
            </div>
          </div>

          <button className="ui button" type="submit">Submit</button>
        </form>

      </div>
    )
  }
}

Profile.propTypes = {
  "firstName": PropTypes.string,
  "lastName" : PropTypes.string,
  "nickName" : PropTypes.string,
  "phone"    : PropTypes.string,
  "email"    : PropTypes.string,
  "dob"      : PropTypes.string,
  "city"     : PropTypes.string,
  "state"    : PropTypes.string,
  "height"   : PropTypes.string,
  "weight"   : PropTypes.string,
  "gender"   : PropTypes.string
}

export default ProfileContainer = createContainer(() => {
  Meteor.subscribe("Meteor.users.publish.name");
  Meteor.subscribe("Meteor.users.publish.phone");
  Meteor.subscribe("Meteor.users.publish.body");
  Meteor.subscribe("Meteor.users.publish.address");

  // build out fields I want in a safe way
  let dict = {
    "firstName": _.getPath(Meteor.user(), 'name.firstName'),
    "lastName" : _.getPath(Meteor.user(), 'name.lastName'),
    "nickName" : _.getPath(Meteor.user(), 'name.nickName'),
    "phone"    : _.getPath(Meteor.user(), 'phone'),
    "email"    : _.getPath(Meteor.user(), 'emails.0.address'),
    "dob"      : _.getPath(Meteor.user(), 'body.dob'),
    "city"     : _.getPath(Meteor.user(), 'address.city'),
    "state"    : _.getPath(Meteor.user(), 'address.state'),
    "height"   : _.getPath(Meteor.user(), 'address.height'),
    "weight"   : _.getPath(Meteor.user(), 'body.weight'),
    "gender"   : _.getPath(Meteor.user(), 'body.gender')
  }

  // create a object to only review the profile items that you want to actually look at
  return {
    "firstName": _.isString(dict.firstName) ? dict.firstName : "",
    "lastName" : _.isString(dict.lastName)  ? dict.lastName  : "",
    "nickName" : _.isString(dict.nickName)  ? dict.nickName  : "",
    "phone"    : _.isString(dict.phone)     ? dict.phone     : "",
    "email"    : _.isString(dict.email)     ? dict.email     : "",
    "dob"      : _.isString(dict.dob)       ? dict.dob       : "",
    "city"     : _.isString(dict.city)      ? dict.city      : "",
    "state"    : _.isString(dict.state)     ? dict.state     : "",
    "height"   : _.isString(dict.height)    ? dict.height    : "",
    "weight"   : _.isString(dict.weight)    ? dict.weight    : "",
    "gender"   : _.isString(dict.gender)    ? dict.gender    : ""
  };
}, Profile);

Answer 1

為了能夠更新您的字段值，必須將它們記錄為狀態。 我們來舉個例子：

<div className="field">
  <label>First name</label>
  <input type="text" placeholder="First Name" ref="name.firstName" value={this.props.firstName} onChange={this.handleChange}/>
</div>

在這里，您將值設置為this.props.firstName ，它不會更改onChange。 要將其默認為prop值但能夠更新它，請將其作為狀態傳遞。

constructor(props) {
  super(props);
  this.state = {
    firstName: props.firstName,
  };
}

然后在輸入字段中傳遞狀態。 此外， handleChange函數始終更新相同的狀態value 。 您需要告訴您的功能要更新哪個狀態。 您可以從構造函數中刪除綁定，並按如下方式將其刪除：

handleChange(key, e) {
  this.setState({ [key]: e.target.value })
}

並在渲染中

<input type="text" placeholder="First Name" ref="name.firstName" value={this.state.firstName} onChange={ () => this.handleChange('firstName'); }/>