Блог

Немного смущен тем, почему именно мои входные данные не будут обновляться. По сути, я хочу иметь страницу профиля. Страница — это просто форма с полями, которые вы можете редактировать. Если у вас уже есть значения для некоторых вещей (имя и т. Д.), Я хочу, Чтобы они автоматически заполнялись по мере ввода пользователем новых значений. Я полагаю, что это как-то связано с попыткой перезаписать значение с помощью is «prop», поэтому я должен перевести реквизит в «состояние» для элементов. Однако, если я попытаюсь установить состояние реквизита, они не получат значения подписки.

Итак, опять же, целью было бы просто загрузить страницу, существующие значения в пользовательском документе пользователя вставляются в соответствующие поля, редактировать поля и отправлять изменения. Просто ввод не изменит значение после того, как я попытаюсь установить его в реквизит.

Любые указатели будут оценены.

Спасибо

 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);
  

Чтобы иметь возможность обновлять значения вашего поля, они должны быть записаны как состояние. Давайте рассмотрим пример:

 <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 которое не изменится при изменении. Чтобы иметь значение по умолчанию для значения 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'); }/>