Meteor React Formは値を変更しません

Question

私の入力が正確に更新されない理由についてちょっと混乱します。基本的に、私はプロフィールページを持っています。このページは、編集可能なフィールドを持つフォームに過ぎません。あなたがすでにいくつかのもの（名前など）の値を持っているならば、私はそれらが新しい値でユーザタイプとして自動的に記入されることを望みます。私はそれが値を上書きしようとすることが何かを持っていると思う "小道具"ですので、アイテムの "状態"に小道具を置く必要があります。しかし、状態を小文字に設定しようとすると、サブスクリプション値を取得しません。

また、目標は、ページの読み込み、ユーザーのユーザー文書内の既存の値の適切なフィールドへのスライド、フィールドの編集、変更の送信だけです。私が小道具にそれを設定しようとすると、ちょうど入力は値を変更しません。

何か指摘していただければ幸いです。

おかげ

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> 

、あなたはのonChangeを変更しないであろうthis.props.firstNameにあなたの値を設定します。 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'); }/>