microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

misc fixes

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-26 11:21:28 -08:00
parent 60041f1ba3
commit d8702ec24e
39 changed files with 99 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
step1-07/demo/README.md
View File

@@ -160,8 +160,12 @@ const { label, completed, complete, id } = this.props;
And then use the input's `onChange` event to fire our `complete` callback. We can see in the signature that we expect and `id` of type string, so we'll pass our `id` prop in.
> A [callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) is a function passed into a component as a prop
```tsx
<input type="checkbox" checked={completed} onChange={() => complete(id)} />
```
> Note that the function param and prop name just happen to be the same. This isn't required.
Now that our todos are firing the `onChange` callback, give them a click and take look at how the app response. Since our footer text is driven off of the number of unchecked todos, the footer will automatically update to reflect the new state.

19
step1-07/demo/src/TodoApp.tsx
View File

@@ -10,7 +10,24 @@ export class TodoApp extends React.Component<any, any> {
constructor(props) {
super(props);
this.state = {
todos: {},
todos: {
'04': {
label: 'Todo 4',
completed: true
},
'03': {
label: 'Todo 3',
completed: false
},
'02': {
label: 'Todo 2',
completed: false
},
'01': {
label: 'Todo 1',
completed: false
}
},
filter: 'all'
};
}

19
step1-07/exercise/src/TodoApp.tsx
View File

@@ -10,7 +10,24 @@ export class TodoApp extends React.Component<any, { todos: Todos; filter: Filter
constructor(props) {
super(props);
this.state = {
todos: {},
todos: {
'04': {
label: 'Todo 4',
completed: true
},
'03': {
label: 'Todo 3',
completed: false
},
'02': {
label: 'Todo 2',
completed: false
},
'01': {
label: 'Todo 1',
completed: false
}
},
filter: 'all'
};
}

2
step1-07/exercise/src/components/TodoHeader.tsx
View File

@@ -26,7 +26,7 @@ export class TodoHeader extends React.Component<any, any> {
}
_onFilter = evt => {
this.props.setFilter(evt.target.textContet);
this.props.setFilter(evt.target.innerText);
};
_onChange = evt => {

2
step1-07/final/src/components/TodoHeader.tsx
View File

@@ -44,7 +44,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
}
_onFilter = evt => {
this.props.setFilter(evt.target.textContet);
this.props.setFilter(evt.target.innerText);
};
_onChange = evt => {

15
step1-07/index.html
View File

@@ -1,15 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="../assets/shared.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
</head>
<body class="ms-Fabric">
<div class="Container">
<ul class="Tiles">
<li class="Tile"><a href="./demo/index.html" class="Tile-link">Demo Start</a></li>
<li class="Tile"><a href="./final/index.html" class="Tile-link">Final</a></li>
</ul>
</div>
</body>
</html>