从表单提交中的两个输入字段中更新状态

时间:2016-12-08 00:56:50

标签: forms reactjs components state

我正在尝试使用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;

2 个答案:

答案 0 :(得分:13)

如果我理解你想要的东西,你可以按照以下方式做到:

  • 在状态中为表单值

    添加一个空对象

    formValues: {}

  • 将名称属性添加到字段

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

Here is fiddle.

希望这有帮助。

答案 1 :(得分:1)

事件元素上不存在对"# -*- coding: UTF-8 -*-"的引用。对于电子邮件和名称,内联事件处理程序输入的文本值为event.target.email。快速解决方案是为每个输入创建一个单独的处理程序:

event.target.value