Here is a simple form example using React JS:
import React from 'react';
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
message: ''
};
}
handleChange = (event) => {
this.setState({ [event.target.name]: event.target.value });
}
handleSubmit = (event) => {
event.preventDefault();
// You can do something with the form values here
console.log(this.state);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" name="name" value={this.state.name} onChange={this.handleChange} />
</label>
<br />
<label>
Email:
<input type="email" name="email" value={this.state.email} onChange={this.handleChange} />
</label>
<br />
<label>
Message:
<textarea name="message" value={this.state.message} onChange={this.handleChange} />
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
}
export default MyForm;
This form has three fields: name, email, and message. It uses the constructor
method to initialize the state with empty string values for each field. The handleChange
method updates the corresponding field in the state whenever the user types in the input field. The handleSubmit
method is called when the form is submitted and it prevents the default form submission behavior. You can add your own logic to the handleSubmit
method to do something with the form values.