Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Using input fields" guide #95

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

"Using input fields" guide #95

wants to merge 8 commits into from

Conversation

louiscenter
Copy link
Member

This guide will introduce developers to the very basics of wiring up input fields to their application's state. A more advanced guide describing complex form structures will follow, but this tutorial will describe how to create the most basic of interactive forms.

@louiscenter louiscenter changed the title [WIP] "Using input fields" guide "Using input fields" guide Jul 16, 2017
@bendik
Copy link

bendik commented Jul 16, 2017

great stuff 🙌 noticed the 'e' parameter explenation could be an unabbrivated event and proceed to explain that the target is a reference to the element triggering the event

@bcomnes
Copy link
Collaborator

bcomnes commented Jul 16, 2017

Really great work! Just gave it a light read through.


```html
<div class="input">
<div class="label">The Lion says</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenreader friendly version:

<label for="lion">The Lion says</label>

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good suggestion! ✨

```html
<div class="input">
<div class="label">The Lion says</div>
<input type="text" id="lion" oninput=${updateLion} />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if relevant in this situation; but setting a default value from state might make sense - that way on re-renders the value isn't cleared. Not sure if it matters too much here tho

<input value=${state.lion} />

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A default value is set on this element a few paragraphs later. I wanted to make a point to the reader that not setting a value property might break things, especially if you're re-rendering frequently.

@louiscenter
Copy link
Member Author

louiscenter commented Jul 19, 2017

@bendik you're probably right about the e variable, it might not hurt to rename this to event. There already is a description of what this object is:

Below our template, we've created a new function called updateLion(). It has one parameter, e, which contains information about the <input /> field that initially triggered the function

Should I expand on this more? There's a bit of a description about what these event reference objects do in the first guide, your-first-choo-app, but it might not hurt to re-iterate this.

@bendik
Copy link

bendik commented Jul 20, 2017

@louiscenter Good to hear it's explained in the your-first-choo-app tutorial. I was assuming the guide was covering browser event first-timers (not that there are a lot of those around these woods), but I'd try to avoid a sentence that associate the parameter only with the element, since it contains more than that. No need to elaborate this really ✨ unless you 💪🤔 cute

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants