@samitouri / QOS-React-2 / commits / 552033e33b

Docs update - Additional (#8115)

* Reapplied fixes to updated docs from master * Reapplied fixes to Forms, removed ES2016 function includes() * Missing carriage return * Adding back some line breaks * Making requested changes. * Making space changes * Fixed typo and removed unnecessary hyphen. * Reworded select, and highlighted line * Fixed string styles * Refactored <label> to use htmlFor * Another refactor of <label> * Removed name prop from radiobutton

Eric Nakagawa committed Oct 26, 2016 at 16:14 UTC 552033e33b6a3f6eddc4873fa2140b8ad2e090ea

1 file changed +59 -34

docs/docs/forms.md

+59 -34

@@ -34,7 +34,7 @@ To update the value in response to user input, you would use the `onChange` even

34 class Form extends React.Component {

35 constructor(props) {

36 super(props);

37 - this.state = {value: ""};

37 + this.state = {value: ''};

38 this.handleChange = this.handleChange.bind(this);

39 this.handleSubmit = this.handleSubmit.bind(this);

40 }

@@ -44,7 +44,7 @@ class Form extends React.Component {

44 }

46 handleSubmit(event) {

47 - alert("Text field value is: '" + this.state.value + "'");

47 + alert('Text field value is: ' + this.state.value);

48 }

50 render() {

@@ -99,7 +99,7 @@ If you wanted to listen to updates to the value, you could use the `onChange` ev

99 class Form extends React.Component {

100 constructor(props) {

101 super(props);

102 - this.state = {value: ""};

102 + this.state = {value: ''};

103 this.handleChange = this.handleChange.bind(this);

104 this.handleSubmit = this.handleSubmit.bind(this);

105 }

@@ -109,7 +109,7 @@ class Form extends React.Component {

109 }

110

111 handleSubmit(event) {

112 - alert("Text field value is: '" + this.state.value + "'");

112 + alert('Text field value is: ' + this.state.value);

113 }

114

115 render() {

@@ -161,7 +161,7 @@ Like all DOM events, the `onChange` prop is supported on all native components a

161

162 > Note:

163 >

164 -> For `<input>` and `<textarea>`, `onChange` should generally used instead of — the DOM's built-in [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) event handler.

164 +> For `<input>` and `<textarea>`, `onChange` should generally be used instead of the DOM's built-in [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) event handler.

165

166 ## Advanced Topics

167

@@ -204,9 +204,9 @@ If you *do* decide to use children, they will behave like `defaultValue`.

204

205 ### Why Select Value?

206

207 -The selected `<option>` in an HTML `<select>` is normally specified through that option's `selected` attribute. In React, in order to make components easier to manipulate, the following format is adopted instead:

207 +The selected `<option>` in an HTML `<select>` is normally specified through that option's `selected` attribute. In React we assign the `select` component a specific value by passing a `value` prop:

208

209 -```javascript

209 +```javascript{1}

210 <select value="B">

211 <option value="A">Apple</option>

212 <option value="B">Banana</option>

@@ -233,7 +233,7 @@ For instance, if you want to imperatively submit a form, one approach would be t

233 class Form extends React.Component {

234 constructor(props) {

235 super(props);

236 - this.state = {value: ""};

236 + this.state = {value: ''};

237 this.handleChange = this.handleChange.bind(this);

238 this.handleSubmit = this.handleSubmit.bind(this);

239 }

@@ -242,14 +242,18 @@ class Form extends React.Component {

242 }

243

244 handleSubmit(event) {

245 - alert("Text field value is: '" + this.state.value + "'");

245 + alert('Text field value is: ' + this.state.value);

246 }

247

248 render() {

249 return (

250 <div>

251 - <input type="text" placeholder="edit me"

252 - value={this.state.value} onChange={this.handleChange} />

251 + <input

252 + type="text"

253 + placeholder="edit me"

254 + value={this.state.value}

255 + onChange={this.handleChange}

256 + />

257 <button onClick={this.handleSubmit}>Submit</button>

258 </div>

259 );

@@ -268,7 +272,7 @@ ReactDOM.render(<Form />, document.getElementById('root'));

272 class Form extends React.Component {

273 constructor(props) {

274 super(props);

271 - this.state = {value: ""};

275 + this.state = {value: ''};

276 this.handleChange = this.handleChange.bind(this);

277 this.handleSubmit = this.handleSubmit.bind(this);

278 }

@@ -278,7 +282,7 @@ class Form extends React.Component {

282 }

283

284 handleSubmit(event) {

281 - alert("Textarea value is: '" + this.state.value + "'");

285 + alert('Textarea value is: ' + this.state.value);

286 }

287

288 render() {

@@ -306,7 +310,7 @@ ReactDOM.render(<Form />, document.getElementById('root'));

310 class Form extends React.Component {

311 constructor(props) {

312 super(props);

309 - this.state = {value: "B"};

313 + this.state = {value: 'B'};

314 this.handleChange = this.handleChange.bind(this);

315 this.handleSubmit = this.handleSubmit.bind(this);

316 }

@@ -316,7 +320,7 @@ class Form extends React.Component {

320 }

321

322 handleSubmit(event) {

319 - alert("Select value is: '" + this.state.value + "'");

323 + alert('Select value is: ' + this.state.value);

324 }

325

326 render() {

@@ -344,7 +348,7 @@ ReactDOM.render(<Form />, document.getElementById('root'));

348 class Form extends React.Component {

349 constructor(props) {

350 super(props);

347 - this.state = {value: "B"};

351 + this.state = {value: 'B'};

352 this.handleChange = this.handleChange.bind(this);

353 this.handleSubmit = this.handleSubmit.bind(this);

354 }

@@ -354,19 +358,30 @@ class Form extends React.Component {

358 }

359

360 handleSubmit(event) {

357 - alert("Radio button value is: '" + this.state.value + "'");

361 + alert('Radio button value is: ' + this.state.value);

362 }

363

364 render() {

365 return (

366 <div>

363 - <input type="radio" name="choice" value="A"

364 - onChange={this.handleChange} /> Option A<br />

365 - <input type="radio" name="choice" value="B"

366 - onChange={this.handleChange} defaultChecked={true} /> Option B<br />

367 - <input type="radio" name="choice" value="C"

368 - onChange={this.handleChange} /> Option C<br />

367 + <label>

368 + <input type="radio" value="A" id="choice-a"

369 + onChange={this.handleChange} />

370 + Option A

371 + </label>

372 + <br />

373 + <label>

374 + <input type="radio" value="B" id="choice-b"

375 + onChange={this.handleChange} defaultChecked={true} />

376 + Option B

377 + </label>

378 <br />

379 + <label>

380 + <input type="radio" value="C" id="choice-c"

381 + onChange={this.handleChange} />

382 + Option C

383 + </label>

384 + <br /><br />

385 <button onClick={this.handleSubmit}>Submit</button>

386 </div>

387 );

@@ -385,7 +400,7 @@ ReactDOM.render(<Form />, document.getElementById('root'));

400 class Form extends React.Component {

401 constructor(props) {

402 super(props);

388 - this.state = {checked: {"A": false, "B": true, "C": false}};

403 + this.state = {checked: {'A': false, 'B': true, 'C': false}};

404 this.handleChange = this.handleChange.bind(this);

405 this.handleSubmit = this.handleSubmit.bind(this);

406 }

@@ -398,23 +413,33 @@ class Form extends React.Component {

413 }

414

415 handleSubmit(event) {

401 - alert("Boxes checked: " +

402 - (this.state.checked.A ? "A " : "") +

403 - (this.state.checked.B ? "B " : "") +

404 - (this.state.checked.C ? "C" : "")

416 + alert('Boxes checked: ' +

417 + (this.state.checked.A ? 'A ' : '') +

418 + (this.state.checked.B ? 'B ' : '') +

419 + (this.state.checked.C ? 'C' : '')

420 );

421 }

422

423 render() {

424 return (

425 <div>

411 - <input type="checkbox" value="A"

412 - onChange={this.handleChange} /> Option A<br />

413 - <input type="checkbox" value="B"

414 - onChange={this.handleChange} defaultChecked={true} /> Option B<br />

415 - <input type="checkbox" value="C"

416 - onChange={this.handleChange} /> Option C<br />

426 + <label>

427 + <input type="checkbox" value="A"

428 + onChange={this.handleChange} />

429 + Option A

430 + </label>

431 + <br />

432 + <label>

433 + <input type="checkbox" value="B"

434 + onChange={this.handleChange} defaultChecked={true} />

435 + Option B

436 + </label>

437 <br />

438 + <label><input type="checkbox" value="C"

439 + onChange={this.handleChange} />

440 + Option C

441 + </label>

442 + <br /><br />

443 <button onClick={this.handleSubmit}>Submit</button>

444 </div>

445 );