我目前正在学习React.js,使用jquery或ajax调用将表单中的信息返回到帖子时遇到了麻烦。基本上,表单中的所有信息都会在提交后在标签中发布数据。
这是我的代码:
var BasicInputBox = React.createClass({
render: function() {
return (
<div>
<label>{this.props.label}</label>
<br/>
<input type="text" onChange={this.props.valChange} value={ this.props.val} />
<br/>
</div>
);
}
});
var CommentBox = React.createClass({
render: function() {
return (
<div>
<label>Have a question?</label>
<br/>
<textarea type="text" onChange={this.props.valChange} value={ this.props.val} />
<br/>
</div>
);
}
});
var SubmitButton = React.createClass({
render: function() {
return (
<div>
<button type="submit" onClick={this.props.submit}>
Submit
</button>
</div>
);
}
});
var Contact = React.createClass({
getInitialState: function() {
return {}
},
submit: function(e) {
e.preventDefault()
console.log(this.state);
this.setState({
name: "",
email: "",
comment: ""
})
},
nameChange: function(e) {
this.setState({
name: e.target.value
})
},
emailChange: function(e) {
this.setState({
email: e.target.value
})
},
commentChange: function(e) {
this.setState({
comment: e.target.value
})
},
render: function() {
return (
<form>
<BasicInputBox label="Name:" valChange={this.nameChange} val={this.state.name}/>
<BasicInputBox label="Email:" valChange={this.emailChange} val={this.state.email}/>
<CommentBox valChange={this.commentChange} val={this.state.comment}/>
<SubmitButton submit={this.submit}/>
</form>
);
}
});
React.render(
<Contact></Contact>,
document.body
);
最佳答案
正如@BinaryMuse指出的那样,这里的问题是您的Submit方法实际上并没有进行任何提交。您提到要通过AJAX进行此操作,因此需要1)在页面上包含jQuery(或Zepto),以及2)进行ajax调用。这是完成第二部分的一种方法:
1)
首先,您实际上不需要将Submit方法作为属性提供给Submit按钮。在表单内单击“提交”按钮时,它将触发表单的onSubmit事件,因此您可以在此简单地附加this.submit
方法。
另外,您实际上不需要为提交按钮创建单独的组件。这种细粒度在这里可能不合理,因为您可以用更少的代码行来完成同一件事。因此,我将删除您的SubmitButton组件,并将您的Contact组件渲染功能更新为:
render: function(){
return (
<form onSubmit={this.submit}>
<BasicInputBox label="Name:" valChange={this.nameChange} val={this.state.name}/>
<BasicInputBox label="Email:" valChange={this.emailChange} val={this.state.email}/>
<CommentBox valChange={this.commentChange} val={this.state.comment}/>
<button type="submit">Submit</button>
</form>
);
}
2)接下来,您可以通过添加AJAX调用以这种方式更改Submit方法。根据向其发送表单的服务器/ API的详细信息,您可能需要稍微修改AJAX调用,但是我在这里输入的是一个相当通用的表单,很可能会起作用:
submit: function (e){
var self
e.preventDefault()
self = this
console.log(this.state);
var data = {
name: this.state.name,
email: this.state.email,
comment: this.state.comment
}
// Submit form via jQuery/AJAX
$.ajax({
type: 'POST',
url: '/some/url',
data: data
})
.done(function(data) {
self.clearForm()
})
.fail(function(jqXhr) {
console.log('failed to register');
});
}
注意:我也将您以前用于清除表单的代码封装在自己的函数中,如果AJAX调用返回成功,则会调用该代码。
我希望这有帮助。我将代码放在jsFiddle中,可以对其进行一些测试:https://jsfiddle.net/69z2wepo/9888/