Реагировать на состояние обновления в двух полях ввода после отправки формы

Question

Я пытаюсь сделать простую контактную форму, используя React. В конце концов я отправлю данные, собранные из состояния, в базу данных, но сейчас я пытаюсь просто передать их в консольный журнал правильных значений.

Прямо сейчас поле электронной почты переопределяет поле имени, и когда я консоль регистрирую оба состояния, имя появляется, и электронная почта не определена. Вот мой компонент React

import React, { Component, PropTypes } from 'react';
import ContactData from '../data/ContactData.js';


class FormContact extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '',
            email: '',
            textArea: ''
        }
    }

    handleChange(event) {
        event.preventDefault();
        this.setState({
            name: event.target.value,
            email: event.target.email
        })
    }

    handleSubmit(event) {
        event.preventDefault();
        console.log(this.state.name + ' ' + this.state.email);
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit.bind(this)}>
                <label> Name:
                    <input type="text" placeholder="Name" value={this.state.name} onChange={this.handleChange.bind(this)} />
                </label><br />
                <label> Email:
                    <input type="text" placeholder="Email" value={this.state.email} onChange={this.handleChange.bind(this)}/>
                </label><br />
                    <input className="btn btn-primary" type="submit" value="Submit" />
           </form>
        )
    }
}

FormContact.PropTypes = {
    subName: PropTypes.string,
    subEmail: PropTypes.string
}

FormContact.defaultProps = {
    subName: 'Sam',
    subEmail: ''
}

class Contact extends Component {
    render() {
        return (
            <div>
                <h1>CONTACT PAGE</h1>
                <FormContact />
            </div>
        )
    }
}


export default Contact;

Answer 1

Если я понимаю, что вы хотите, вы можете сделать это следующим образом:

• Добавьте пустой объект в вашем состоянии для значений формы

  formValues: {}

• Добавьте атрибут name в ваши поля

  <input name="name" .... /><input name="email" .... />

• затем в зависимости от этого имени обновите ваше состояние в функции handleChange

  let formValues = this.state.formValues;
  let name = event.target.name; // Field name
  let value = event.target.value; // Field value
  
  formValues[name] = value;
  
  this.setState({formValues})
  

• И если значения идут на один уровень глубже, вы можете использовать value={this.state.formValues["name"]} вместо value={this.state.name} - где name - это значение атрибута name вашего поля ввода

Таким образом, все вместе должно быть следующим:

class Test extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            formValues: {}
        }
    }

    handleChange(event) {
        event.preventDefault();
        let formValues = this.state.formValues;
        let name = event.target.name;
        let value = event.target.value;

        formValues[name] = value;

        this.setState({formValues})
    }

    handleSubmit(event) {
        event.preventDefault();
        console.log(this.state.formValues);
    }

        render(){
        return (
        <form onSubmit={this.handleSubmit.bind(this)}>
                <label> Name:
                    <input type="text" name="name" placeholder="Name" value={this.state.formValues["name"]} onChange={this.handleChange.bind(this)} />
                </label><br />
                <label> Email:
                    <input type="text" name="email" placeholder="Email" value={this.state.formValues["email"]} onChange={this.handleChange.bind(this)}/>
                </label><br />
                    <input className="btn btn-primary" type="submit" value="Submit" />
           </form>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

Вот скрипка.

Надеюсь это поможет.

Answer 2

Ссылка на event.target.email не существует в элементе события. Значение ввода текста из встроенного обработчика событий будет event.target.value для электронной почты и имени. Быстрое решение - создать отдельный обработчик для каждого ввода:

handleChangeName(event) { 
  event.preventDefault();
  this.setState({ name: event.target.value });  //<-- both use the same reference
}                                               //    to get the contextual value
handleChangeEmail(event) {                      //    from the inputs v
  event.preventDefault();                       //                    |
  this.setState({ email: event.target.value }); //<--------------------
}