Почему значения представления формы React не определены? - PullRequest
Новая
       8

Почему значения представления формы React не определены?

0 голосов
/ 04 ноября 2018

Я пытаюсь создать форму и сохранить ее значения в состоянии - пока что разумно.

Я думаю, что все настроил правильно, но когда я возвращаю содержимое состояния, каждое поле возвращается неопределенным. Я не сомневаюсь, что есть что-то простое, что я упустил из виду, но не могу понять, что это такое ...

Может кто-нибудь избавить меня от моих страданий? 

handleAddProperty = (event) => {
  event.preventDefault();
  console.log(this.state.fields);
  console.log(this.state.fields.type);
};

handleFieldChange = (event) => {
    this.setState({
      fields: {
        title: event.target.value.title,
        type: event.target.value.type,
        bedrooms: event.target.value.bedrooms,
        bathrooms: event.target.value.bathrooms,
        price: event.target.value.price,
        city: event.target.value.city,
        email: event.target.value.email,
      },
    });
  };

 render() {
    return (
      <div className="addproperty">
        <form onSubmit={this.handleAddProperty}>
          <button type="submit">Add</button>
          <input name="title" value={this.state.fields.title} onChange={this.handleFieldChange} />
          <select name="type" value={this.state.fields.type} onChange={this.handleFieldChange}>
            <option value={this.state.fields.type}>Flat</option>
            <option value={this.state.fields.type}>Detached</option>
            <option value={this.state.fields.type}>Semi-Detached</option>
            <option value={this.state.fields.type}>Terraced</option>
            <option value={this.state.fields.type}>End of Terrace</option>
            <option value={this.state.fields.type}>Cottage</option>
            <option value={this.state.fields.type}>Bungalow</option>
          </select>
          <input name="bedrooms" value={this.state.fields.bedrooms} onChange={this.handleFieldChange} />
          <input name="bathrooms" value={this.state.fields.bathrooms} onChange={this.handleFieldChange} />
          <input name="price" value={this.state.fields.price} onChange={this.handleFieldChange} />
          <select name="city" value={this.state.fields.city} onChange={this.handleFieldChange}>
            <option value={this.state.fields.city}>Manchester</option>
            <option value={this.state.fields.city}>Leeds</option>
            <option value={this.state.fields.city}>Sheffield</option>
            <option value={this.state.fields.city}>Liverpool</option>
          </select>
          <input name="email" value={this.state.fields.email} onChange={this.handleFieldChange} />
        </form>
      </div>
    );
  }
}

1 Ответ

0 голосов
/ 04 ноября 2018

Вы должны получить доступ к event.target.value, а не к event.target.value[key], потому что функция handleFieldChange срабатывает для каждого поля ввода (когда они меняют свое состояние) и для каждого из этих триггеров event.target относится к отдельному полю ввода ( в основном ввод, который был изменен).

Чтобы обновить состояние, вы можете использовать event.target.name в качестве ключа для членов вашего объекта формы внутри состояния компонента. Код может выглядеть следующим образом: 

 constructor(props) {
   super(props);
   this.state = { form: { name: 'Jane' } };
 }

 handleFieldChange(event) {
    // This will update specific key in your form object inside the local state
    this.setState({
      form: Object.assign({}, this.state.form, {
      [event.target.name]: event.target.value,
    }),
   });
 }


 <input
    name="test"
    type="text"
    onChange={e => this.handleFieldChange(e)}
 />
...