Skip to content

Commit dcd5b91

Browse files
rwieruchrwieruch
committed
refactor to function components, link article
1 parent d833515 commit dcd5b91

15 files changed

Lines changed: 4514 additions & 2946 deletions

‎.prettierrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
{
3+
"semi": true,
4+
"trailingComma": "es5",
5+
"singleQuote": true,
6+
"printWidth": 70,
7+
}

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
[![Build Status](https://travis-ci.org/the-road-to-learn-react/react-controlled-components-examples.svg?branch=master)](https://travis-ci.org/the-road-to-learn-react/react-controlled-components-examples) [![Slack](https://slack-the-road-to-learn-react.wieruch.com/badge.svg)](https://slack-the-road-to-learn-react.wieruch.com/) [![Greenkeeper badge](https://badges.greenkeeper.io/the-road-to-learn-react/react-controlled-components-examples.svg)](https://greenkeeper.io/)
44

5+
Demonstrating how different input elements are implemented as controlled (uncontrolled) components in React. [Read more about it](https://www.robinwieruch.de/react-controlled-components/).
6+
57
## Installation
68

79
* `git clone git@github.com:the-road-to-learn-react/react-controlled-components-examples.git`

‎package-lock.json‎

Lines changed: 4199 additions & 2626 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,20 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"react": "^16.2.0",
7-
"react-dom": "^16.2.0",
8-
"react-scripts": "2.1.0"
6+
"react": "^16.8.6",
7+
"react-dom": "^16.8.6",
8+
"react-scripts": "2.1.8"
99
},
1010
"scripts": {
1111
"start": "react-scripts start",
1212
"build": "react-scripts build",
1313
"test": "react-scripts test --env=jsdom",
1414
"eject": "react-scripts eject"
15-
}
15+
},
16+
"browserslist": [
17+
">0.2%",
18+
"not dead",
19+
"not ie <= 11",
20+
"not op_mini all"
21+
]
1622
}

‎src/App.css‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎src/App.js‎

Lines changed: 113 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,124 @@
1-
import React, { Component } from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
1+
import React, { useState } from 'react';
42

3+
// component manages itself without external API
4+
// not useful for real applications,
5+
// but just for the sake of demonstrating uncontrolled/controlled components
6+
7+
import StandaloneTextInput from './Components/StandaloneTextInput';
8+
9+
// components managed from outside (e.g. App component)
10+
11+
import TextInput from './Components/TextInput';
512
import Select from './Components/Select';
613
import NumberInput from './Components/NumberInput';
7-
import TextInput from './Components/TextInput';
814
import Checkbox from './Components/Checkbox';
915
import Radio from './Components/Radio';
1016

11-
class App extends Component {
12-
constructor(props) {
13-
super(props);
14-
15-
this.state = {
16-
selectValue: 'grapefruit',
17-
numberInputValue: 0,
18-
textInputValue: 'Hello World',
19-
checkboxValue: true,
20-
radioValue: 'small',
21-
};
22-
23-
this.handleSelectChange = this.handleSelectChange.bind(this);
24-
this.handleNumberInputChange = this.handleNumberInputChange.bind(this);
25-
this.handleTextInputChange = this.handleTextInputChange.bind(this);
26-
this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
27-
this.handleRadioChange = this.handleRadioChange.bind(this);
28-
}
29-
30-
handleSelectChange(value) {
31-
this.setState({ selectValue: value });
32-
}
33-
34-
handleNumberInputChange(value) {
35-
this.setState({ numberInputValue: value });
36-
}
37-
38-
handleTextInputChange(value) {
39-
this.setState({ textInputValue: value });
40-
}
41-
42-
handleCheckboxChange(value) {
43-
this.setState({ checkboxValue: value });
44-
}
45-
46-
handleRadioChange(value) {
47-
this.setState({ radioValue: value });
48-
}
49-
50-
render() {
51-
const {
52-
selectValue,
53-
numberInputValue,
54-
textInputValue,
55-
checkboxValue,
56-
radioValue,
57-
} = this.state;
58-
59-
return (
60-
<div className="App">
61-
<header className="App-header">
62-
<img src={logo} className="App-logo" alt="logo" />
63-
<h1 className="App-title">Welcome to React</h1>
64-
</header>
65-
66-
<p className="App-intro">
67-
To get started, edit <code>src/App.js</code> and save to reload.
17+
const App = () => {
18+
const [textInputValue, setRextInputValue] = useState('Hello World');
19+
const [selectValue, setSelectValue] = useState('grapefruit');
20+
const [numberInputValue, setNumberInputValue] = useState(0);
21+
const [checkboxValue, setCheckboxValue] = useState(true);
22+
const [radioValue, setRadioValue] = useState('small');
23+
24+
const handleTextInputChange = value => {
25+
setRextInputValue(value);
26+
};
27+
28+
const handleSelectChange = value => {
29+
setSelectValue(value);
30+
};
31+
32+
const handleNumberInputChange = value => {
33+
setNumberInputValue(value);
34+
};
35+
36+
const handleCheckboxChange = value => {
37+
setCheckboxValue(value);
38+
};
39+
40+
const handleRadioChange = value => {
41+
setRadioValue(value);
42+
};
43+
44+
return (
45+
<div>
46+
{/* Uncontrolled and Controlled Input Example, State/Functions managed within Component */}
47+
<div>
48+
<StandaloneTextInput />
49+
</div>
50+
51+
<hr />
52+
53+
{/* Different Controlled Inputs, State/Callbacks managed in App Components */}
54+
<div>
55+
<TextInput
56+
value={textInputValue}
57+
onTextInputChange={handleTextInputChange}
58+
>
59+
Type a text
60+
</TextInput>
61+
<p>
62+
<strong>Result:</strong> {textInputValue}
6863
</p>
64+
</div>
6965

70-
<div>
71-
<Select value={selectValue} onSelectChange={this.handleSelectChange}>Choose a fruit</Select>
72-
Result: {selectValue}
73-
</div>
74-
<div>
75-
<NumberInput value={numberInputValue} onNumberInputChange={this.handleNumberInputChange} min={-1} max={3}>Choose a number</NumberInput>
76-
Result: {numberInputValue}
77-
</div>
78-
<div>
79-
<TextInput value={textInputValue} onTextInputChange={this.handleTextInputChange}>Type a text</TextInput>
80-
Result: {textInputValue}
81-
</div>
82-
<div>
83-
<Checkbox value={checkboxValue} onCheckboxChange={this.handleCheckboxChange}>Check the box</Checkbox>
84-
Result: {checkboxValue.toString()}
85-
</div>
86-
<div>
87-
<Radio value={radioValue} onRadioChange={this.handleRadioChange}>Choose a size</Radio>
88-
Result: {radioValue}
89-
</div>
66+
<hr />
67+
68+
<div>
69+
<Select
70+
value={selectValue}
71+
onSelectChange={handleSelectChange}
72+
>
73+
Choose a fruit
74+
</Select>
75+
<p>
76+
<strong>Result:</strong> {selectValue}
77+
</p>
78+
</div>
79+
80+
<hr />
81+
82+
<div>
83+
<NumberInput
84+
value={numberInputValue}
85+
onNumberInputChange={handleNumberInputChange}
86+
min={-1}
87+
max={3}
88+
>
89+
Choose a number
90+
</NumberInput>
91+
<p>
92+
<strong>Result:</strong> {numberInputValue}
93+
</p>
94+
</div>
95+
96+
<hr />
97+
98+
<div>
99+
<Checkbox
100+
value={checkboxValue}
101+
onCheckboxChange={handleCheckboxChange}
102+
>
103+
Check the box
104+
</Checkbox>
105+
<p>
106+
<strong>Result:</strong> {checkboxValue.toString()}
107+
</p>
108+
</div>
109+
110+
<hr />
111+
112+
<div>
113+
<Radio value={radioValue} onRadioChange={handleRadioChange}>
114+
Choose a size
115+
</Radio>
116+
<p>
117+
<strong>Result:</strong> {radioValue}
118+
</p>
90119
</div>
91-
);
92-
}
93-
}
120+
</div>
121+
);
122+
};
94123

95124
export default App;

‎src/Components/Checkbox.js‎

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,20 @@
1-
import React, { Component } from 'react';
1+
import React from 'react';
22

3-
class Checkbox extends Component {
4-
constructor(props) {
5-
super(props);
3+
const Checkbox = ({ value, onCheckboxChange, children }) => {
4+
const handleChange = event => {
5+
onCheckboxChange(event.target.checked);
6+
};
67

7-
this.handleChange = this.handleChange.bind(this);
8-
}
8+
return (
9+
<label>
10+
{children}:
11+
<input
12+
type="checkbox"
13+
checked={value}
14+
onChange={handleChange}
15+
/>
16+
</label>
17+
);
18+
};
919

10-
handleChange(event) {
11-
this.props.onCheckboxChange(event.target.checked);
12-
}
13-
14-
render() {
15-
const { value, children } = this.props;
16-
17-
return (
18-
<label>
19-
{children}:
20-
<input
21-
type="checkbox"
22-
checked={value}
23-
onChange={this.handleChange}
24-
/>
25-
</label>
26-
);
27-
}
28-
}
29-
30-
export default Checkbox;
20+
export default Checkbox;

0 commit comments

Comments
 (0)