我正在尝试使用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;
答案 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'));
希望这有帮助。
答案 1 :(得分:1)
事件元素上不存在对"# -*- coding: UTF-8 -*-"
的引用。对于电子邮件和名称,内联事件处理程序输入的文本值为event.target.email
。快速解决方案是为每个输入创建一个单独的处理程序:
event.target.value