[英]ReactJs submitting form data to the screen
I want a way to submit a form in ReactJs to the browser. 我想要一种在ReactJs中向浏览器提交表单的方法。
var ToDoForm = React.createClass({
getInitialState: function() {
return {text: ''};
},
handleChange: function(event) {
this.setState({text: event.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
return (
<h2> hey </h2>
)
},
render: function() {
return (
<div>
<h1> todos </h1>
<form className="todoForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Type out a task"
value={this.state.text}
onChange={this.handleChange}
/>
<input
type="submit"
value="Submit todo"
/>
</form>
</div>
);
}
});
I have a function handleSubmit
that I want when the form is submitted to just print the word hey
in the browser as a heading2. 我有一个功能handleSubmit
,我希望在提交表单时只在浏览器中打印单词hey
作为标题2。 I know this is not very wise or makes any sense but I just want to see it working and then I'll it to return something that makes more sense. 我知道这不是很明智或没有任何意义,但我只是想看看它是否有效,然后我将它返回更有意义的内容。 So far when I click on the submit button, nothing happens. 到目前为止,当我单击“提交”按钮时,什么都没有发生。 any solutions? 有什么解决办法吗?
also worth adding, this question ( Get form data in Reactjs ). 同样值得补充的是这个问题( 在Reactjs中获取表单数据 )。 I want what this guy is basically doing but instead of console.logs an actual print to screen, just to clarify if I have been unclear 我想要这家伙基本上在做什么,但不是在console.log上将实际打印记录到屏幕上,只是为了澄清我是否不清楚
Use a state to handle it ? 用状态来处理吗? Something like 就像是
getInitialState: function(){
return{
submitted: false
},
handleSubmit: function(e){
e.preventDefault();
this.setState({ subbmitted: true});
},
render: function(){
return (
<div>
<h1> todos </h1>
{!!this.state.submitted ?
<div>
<h2> {'Hey'} </h2>
</div>
:
<form className="todoForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Type out a task"
value={this.state.text}
onChange={this.handleChange}
/>
<input
type="submit"
value="Submit todo"
/>
</form>
</div>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.