Documentation for handling multiple options with <select> #531
Conversation
|
Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed. If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks! |
nupurgrover
changed the title
|
Deploy preview for reactjs ready! Built with commit cf3fcd6 |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks! |
| The `handleChange` method from the above example would then change to get the selected values from `event.target.selectedOptions`. | ||
|
|
||
| ```javascript{4,10-12,24} | ||
| handleChange(event) { |
There was a problem hiding this comment.
The indentation is inconsistent for the rest of this page, which is 2 spaces for both HTML and JS. Do fix your markup accordingly (not sure if Prettier does that for you).
Also, you can simplify handleChange to:
const selectedFlavors = Array.from(event.target.selectedOptions).map(option => option.value);
this.setState({value: selectedFlavors});There was a problem hiding this comment.
@yangshun Done. I was not sure if using arrow functions was OK for the docs or not, that is why decided to write it using function
| The `<select>` inside the render would also change to pass an array to the `value` attribute: | ||
|
|
||
| ```javascript{4,10-12,24} | ||
| <select value={this.state.value} onChange={this.handleChange} multiple={true}> |
This reverts commit 16f3254.
|
@yangshun I made changes to correct the indentation. Do let me know if there's anything else I need to change, thanks! :) |
|
I'm not from the React core team. Just a random commenter passing by 😄 |
|
The documentation has not been revised. Spent a while reinventing this solution. :( |
|
I actually forgot I wrote this. Have just updated the branch. Will comment on the original issue and see if anyone from the core team would be willing to merge. |
|
Sorry — we're a bit overwhelmed and haven't been looking at docs PRs closely. |
| ``` | ||
|
|
||
| [Try it on CodePen.](https://codepen.io/nupgrover/pen/RxeqLQ?editors=0010) | ||
|
|
||
| > Note |
There was a problem hiding this comment.
This note below now looks confusing because we've just discussed it. Maybe move it above, and then expand on how to change it dynamically?
|
Seems like Any other ideas? |
|
@gaearon Oh, completely missed that! No, I don't have any ideas (except mentioning it explicitly in the docs) but I'll try and find a workaround and update this PR. |
The short info segment that is currently provided is insufficient to use an `<select multiple={true}>` element.
This is especially confusing and frustraring with the sentence **"this makes it so that `<input type="text">`, `<textarea>`, and `<select>` all work very similarly"** right before it: In the case of using the `multiple` attribute, you *do* need to change your code a little bit more.
The linked anonymous codepen is from me, feel free to copy/paste/modify it as you like; afaik all codepen example are owned by @gaearon?
There is an [alternative codepen example](https://codepen.io/anon/pen/VOEezB?editors=0011) which also deals with writing a more suitable alert message, depending on how many options are selected, but in my opinion it adds unnecessary noice.
This issue has also been addressed in reactjs#531, reactjs#984.
Bumps [url-parse](https://github.com/unshiftio/url-parse) from 1.4.7 to 1.5.1. - [Release notes](https://github.com/unshiftio/url-parse/releases) - [Commits](unshiftio/url-parse@1.4.7...1.5.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Closes #524
Screenshot:
