React JS Form按钮调用

Question

我试图在点击按钮后提交表单，但React中没有触发该功能。

唯一的查询是在提交按钮onclick=submitform上。

因此，我可以获得该值并将其更新为json-arry

import React, { Component } from "react";
class Createcomponent extends Component {
constructor() {
super()
this.state={
firstname:"",
lastname:"",
phonenumber:""
}
this.ontextchange=this.ontextchange.bind(this)
this.submitform=this.submitform.bind(this)
}

componentDidMount() {
console.log("Component Mounted");
}
ontextchange(event) {
if(event.target.id==='fname') {
this.setState({firstname: event.target.value}) 
}
}
submitform() {
alert("trigger");
//console.log(this.state)
}

render(){ 
return (
<div>
<label for="fname">First name:</label>
<input type="text" id="fname" onChange={this.ontextchange} value={this.state.firstname} name="fname"/><br/>
<label for="lname">Last name:</label>
<input type="text" id="lname" onChange={this.ontextchange} value={this.state.lastname} name="lname"/><br/>
<label for="lname">PhoneNumber:</label>
<input type="text" id="phone" onChange={this.ontextchange} value={this.state.phonenumber} name="lname"/><br/>
<input type="submit"  value="Submit"/>
<button onClick={this.submitform}>Submit</button>
</div>
);
}
}
export default Createcomponent

Answer 1

您有两个"提交"；按钮。点击右边的"；提交"；按钮使用您的代码正确触发警报。

左边的"；提交"；按钮，通过设置type = submit设置为表单提交，不会执行任何操作，因为实际上并没有使用<form>。设置一个表单，因为我已经将它添加到下面的代码中，左边的"；提交"；按钮也能工作。我还创建了这个CodeSandbox用于演示。

import React, { Component } from "react";
class Createcomponent extends Component {
constructor() {
super();
this.state = {
firstname: "",
lastname: "",
phonenumber: ""
};
this.ontextchange = this.ontextchange.bind(this);
this.submitform = this.submitFormButton.bind(this);
}
componentDidMount() {
console.log("Component Mounted");
}
ontextchange(event) {
if (event.target.id === "fname") {
this.setState({ firstname: event.target.value });
}
}
submitFormButton() {
alert("trigger");
//console.log(this.state)
}
submitFormOnSubmit(e) {
e.preventDefault();
alert("trigger");
}
render() {
return (
<form onSubmit={this.submitFormOnSubmit}>
<label for="fname">First name:</label>
<input
type="text"
id="fname"
onChange={this.ontextchange}
value={this.state.firstname}
name="fname"
/>
<br />
<label for="lname">Last name:</label>
<input
type="text"
id="lname"
onChange={this.ontextchange}
value={this.state.lastname}
name="lname"
/>
<br />
<label for="lname">PhoneNumber:</label>
<input
type="text"
id="phone"
onChange={this.ontextchange}
value={this.state.phonenumber}
name="lname"
/>
<br />
<input type="submit" value="Submit" />
<button onClick={this.submitFormButton}>Submit</button>
</form>
);
}
}
export default Createcomponent;

Answer 2

确保在标签元素的React中使用htmlFor而不是for。