1import { useState } from 'react';
2
3function myFunctionalComponentFunction() {
4 const [input, setInput] = useState(''); // '' is the initial state value
5 return (
6 <div>
7 <label>Please specify:</label>
8 <input value={input} onInput={e => setInput(e.target.value)}/>
9 </div>
10 );
11}
12
1const input = props => {
2
3let textInput = React.createRef();
4
5function handleClick() {
6 console.log(textInput.current.value);
7}
8
9return (
10 <div>
11 <input ref={textInput} placeholder="Type a message..." />
12 <div onClick={handleClick} className="icon">
13 <i className="fa fa-play" />
14 </div>
15 </div>
16 )
17}
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}>
18 <label>
19 Name:
20 <input type="text" value={this.state.value} onChange={this.handleChange} /> </label>
21 <input type="submit" value="Submit" />
22 </form>
23 );
24 }
25}
1class NameForm extends React.Component {
2 constructor(props) {
3 super(props);
4 this.state = {value: ''};
5
6 this.handleChange = this.handleChange.bind(this);
7 }
8
9 handleChange(event) {
10 this.setState({value: event.target.value});
11 }
12
13 render() {
14 return (
15 <form>
16 <label>
17 Name:
18 <input type="text" value={this.state.value} onChange={this.handleChange} />
19 </label>
20 <input type="submit" value="Submit" />
21 </form>
22 );
23 }
24}