1class NameForm extends React.Component {
2 constructor(props) {
3 super(props);
4 this.state = {value: ''};
5 this.handleChange = this.handleChange.bind(this);
6 this.handleSubmit = this.handleSubmit.bind(this);
7 }
8
9 handleChange(event) { this.setState({value: event.target.value}); }
10 handleSubmit(event) {
11 alert('A name was submitted: ' + this.state.value);
12 event.preventDefault();
13 }
14
15 render() {
16 return (
17 <form onSubmit={this.handleSubmit}> <label>
18 Name:
19 <input type="text" value={this.state.value} onChange={this.handleChange} /> </label>
20 <input type="submit" value="Submit" />
21 </form>
22 );
23 }
24}
1<textarea>
2 Hello there, this is some text in a text area
3</textarea>
1class EssayForm extends React.Component {
2 constructor(props) {
3 super(props);
4 this.state = { value: 'Please write an essay about your favorite DOM element.' };
5 this.handleChange = this.handleChange.bind(this);
6 this.handleSubmit = this.handleSubmit.bind(this);
7 }
8
9 handleChange(event) { this.setState({value: event.target.value}); }
10 handleSubmit(event) {
11 alert('An essay was submitted: ' + this.state.value);
12 event.preventDefault();
13 }
14
15 render() {
16 return (
17 <form onSubmit={this.handleSubmit}>
18 <label>
19 Essay:
20 <textarea value={this.state.value} onChange={this.handleChange} /> </label>
21 <input type="submit" value="Submit" />
22 </form>
23 );
24 }
25}