import React, { Component } from 'react';
import classes from './Form.css';
class Form extends Component {
state = {
firstName: '',
phoneNo: '',
showForm: false
}
displayFormHandler = (e) => {
e.preventDefault();
const updatedName = e.target.value;
this.setState({
firstName: updatedName,
});
}
displayPhoneNoHandler = (e) => {
e.preventDefault();
const updatedPhoneNo = e.target.value;
this.setState({ phoneNo: updatedPhoneNo });
}
handleFormSubmit = (e) => {
e.preventDefault();
this.setState({
showForm: true
});
}
render() {
return (
<div className={classes.Form}>
<form onSubmit={this.handleFormSubmit}>
<label>Name:</label>
<input type="text"
className={classes.inputArea}
name="firstName"
placeholder="Name"
onChange={this.displayFormHandler}
value={this.state.firstName} />
<label>PhoneNo:</label>
<input type="text"
className={classes.inputArea}
placeholder="PhoneNo"
name="phoneNo"
onChange={this.displayPhoneNoHandler}
value={this.state.phoneNo} />
<button type="submit" className={classes.Button}
clicked={this.handleFormSubmit} >Submit</button>
<div className={classes.UserInfo}>
{this.state.showForm && <p>UserName: {this.state.firstName}</p>}
{this.state.showForm && <p>UserName: {this.state.phoneNo}</p>}
</div>
</form>
</div>
);
}
}
export default Form;
当前,我在React JS
中创建了一个运行良好的简单表单,我想在刷新页面后显示用户信息。这样我就可以为每个用户创建按钮,以便我可以决定删除单个用户信息还是进行保存。然后我想在提交表单后清除该字段。