流星反應形式不會改變值

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> 

在這裏，您將值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'); }/>