11import React , { Component } from 'react'
22
3+ function MyTextInput ( props ) {
4+ function handleChange ( event ) {
5+ if ( props . onChange ) props . onChange ( event )
6+ }
7+ return (
8+ < p >
9+ < input type = 'email' value = { props . value } name = { props . name } ref = { props . inputRef } onChange = { handleChange } />
10+ </ p >
11+ )
12+ }
13+ 314class FormsAndInputs extends Component {
415 constructor ( props ) {
516 super ( props )
617 this . state = {
718 fullName : '' ,
8- content : ''
19+ content : '' ,
20+ email : ''
921 }
1022 this . inputFullNameRef = React . createRef ( )
23+ this . inputEmailRef = React . createRef ( )
1124 }
1225
1326
@@ -30,7 +43,7 @@ class FormsAndInputs extends Component {
3043
3144 handleFocusClick = ( event ) => {
3245 event . preventDefault ( )
33- this . inputContentRef . focus ( )
46+ this . inputEmailRef . current . focus ( )
3447 }
3548 handleClearClick = ( event ) => {
3649 event . preventDefault ( )
@@ -44,11 +57,13 @@ class FormsAndInputs extends Component {
4457 // }
4558 render ( ) {
4659 const { fullName} = this . state
60+ const { email} = this . state
4761 return (
4862 < div >
4963 < h1 > Forms and Inputs</ h1 >
5064 < p > Full name is: { fullName } </ p >
5165 < form onSubmit = { this . handleSubmit } >
66+ < MyTextInput inputRef = { this . inputEmailRef } value = { email } name = 'email' onChange = { this . handleInputChange } />
5267 < p > < input ref = { this . inputFullNameRef } type = 'text' placeholder = 'Your Name' value = { fullName } name = 'fullName' onChange = { this . handleInputChange } /> </ p >
5368 < p > < textarea ref = { node => this . inputContentRef = node } placeholder = 'Your message' name = 'content' required = { true } onChange = { this . handleInputChange } > </ textarea > </ p >
5469 < p > < button > Send Message</ button > </ p >
0 commit comments