React组件提交表单函数没有得到值
React组件提交表单函数没有得到值
提问于 2017-04-25 19:14:13
我有一个表单组件，我提交了该组件，然后希望在提交后将数据传递给函数，但是我会收到一条空白警告消息。
以下是代码：
import React, { Component } from 'react';
class SubmitForm extends Component {
constructor() {
super();
this.state = {title: ''};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
this.getdata(this.state.title, this.state.firstname, this.state.lastname);
event.preventDefault();
}
getdata(title) {
alert(title);
alert(firstname);
alert(lastname);
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit.bind(this)}>
<label htmlFor="title">Title</label>
<input type="text" id="title" />
<label htmlFor="firstname">Firstname</label>
<input type="text" id="firstname" />
<label htmlFor="lastname">Lastname</label>
<textarea id="lastname" rows="3"></textarea>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
export default SubmitForm;我怎样才能解决这个问题才能得到数据呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-04-25 19:23:10
表单输入元素没有设置为state的value属性。在React中，您应该在窗体上使用“受控组件”。
请参阅相关的React文档：https://facebook.github.io/react/docs/forms.html
Stack Overflow用户
发布于 2017-04-25 19:21:31
每个组件都需要有一个onChange事件的处理程序。
function handleTitleChange(event) {
this.setState(function() {
return { title: event.target.value };
});
}
<input type="text" id="title" value={this.state.title} onChange={this.handleTitleChange.bind(this)} />下面是React文档的链接：https://facebook.github.io/react/docs/forms.html#controlled-components
也有一些不受控制的组件，但这不是“推荐的”方法。
Stack Overflow用户
发布于 2017-04-25 20:02:14
以下是代码的问题：
- 您要绑定
handleSubmit两次。
- On the constructor `this.handleSubmit = this.handleSubmit.bind(this);`
- and on the form prop onSubmit `<form onSubmit={this.handleSubmit.bind(this)}>`
- 您没有处理表单上的输入值。您应该做一些事情来访问在每个输入上输入的值，侦听
onChange事件(受控元件)或以不受控制成分的形式访问它。 - 您的
getdata()方法是错误的，您正在设置一个参数并传递三个参数。
你的定义是：
getdata(title) {
alert(title);
alert(firstname);
alert(lastname);
}你说它就像：
this.getdata(this.state.title, this.state.firstname, this.state.lastname);功能不是这样运作的。要使它像上面那样工作，您需要定义如下：
getdata(title, firstName, lastName) {
alert(title);
alert(firstName);
alert(lastName);
}因此，一旦您修复了所有这些错误，您应该看看反应文件，以了解更多关于React如何工作的知识。
同时，这里有一个可行的示例，其中包含了React文档中不受控制的组件，这些组件将帮助您理解如何使示例工作：
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={(input) => this.input = input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('app')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43619098
复制相关文章
相似问题
腾讯云开发者
