1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([[4317],{35318:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>h});var a=n(27378);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=a.createContext({}),l=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=l(e.components);return a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,p=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=l(n),h=r,m=u["".concat(p,".").concat(h)]||u[h]||d[h]||o;return n?a.createElement(m,i(i({ref:t},c),{},{components:n})):a.createElement(m,i({ref:t},c))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=u;var s={};for(var p in t)hasOwnProperty.call(t,p)&&(s[p]=t[p]);s.originalType=e,s.mdxType="string"==typeof e?e:r,i[1]=s;for(var l=2;l<o;l++)i[l]=n[l];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},88309:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>f,contentTitle:()=>h,default:()=>g,frontMatter:()=>u,metadata:()=>m,toc:()=>x});var a=n(35318),r=Object.defineProperty,o=Object.defineProperties,i=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,p=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,c=(e,t,n)=>t in e?r(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,d=(e,t)=>{for(var n in t||(t={}))p.call(t,n)&&c(e,n,t[n]);if(s)for(var n of s(t))l.call(t,n)&&c(e,n,t[n]);return e};const u={id:"handling-text-input",title:"Handling Text Input"},h=void 0,m={unversionedId:"handling-text-input",id:"version-0.61/handling-text-input",title:"Handling Text Input",description:"TextInput is a Core Component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changed, and an onSubmitEditing prop that takes a function to be called when the text is submitted.",source:"@site/versioned_docs/version-0.61/handling-text-input.md",sourceDirName:".",slug:"/handling-text-input",permalink:"/docs/0.61/handling-text-input",draft:!1,editUrl:"https://github.com/facebook/react-native-website/blob/main/website/../docs/handling-text-input.md",tags:[],version:"0.61",lastUpdatedAt:1603945169,formattedLastUpdatedAt:"Oct 29, 2020",frontMatter:{id:"handling-text-input",title:"Handling Text Input"},sidebar:"version-0.61/docs",previous:{title:"Layout with Flexbox",permalink:"/docs/0.61/flexbox"},next:{title:"Handling Touches",permalink:"/docs/0.61/handling-touches"}},f={},x=[],y={toc:x};function g(e){var t,n=e,{components:r}=n,c=((e,t)=>{var n={};for(var a in e)p.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&s)for(var a of s(e))t.indexOf(a)<0&&l.call(e,a)&&(n[a]=e[a]);return n})(n,["components"]);return(0,a.kt)("wrapper",(t=d(d({},y),c),o(t,i({components:r,mdxType:"MDXLayout"}))),(0,a.kt)("p",null,(0,a.kt)("a",d({parentName:"p"},{href:"textinput#content"}),(0,a.kt)("inlineCode",{parentName:"a"},"TextInput"))," is a ",(0,a.kt)("a",d({parentName:"p"},{href:"intro-react-native-components"}),"Core Component")," that allows the user to enter text. It has an ",(0,a.kt)("inlineCode",{parentName:"p"},"onChangeText")," prop that takes a function to be called every time the text changed, and an ",(0,a.kt)("inlineCode",{parentName:"p"},"onSubmitEditing")," prop that takes a function to be called when the text is submitted."),(0,a.kt)("p",null,'For example, let\'s say that as the user types, you\'re translating their words into a different language. In this new language, every single word is written the same way: \ud83c\udf55. So the sentence "Hello there Bob" would be translated as "\ud83c\udf55\ud83c\udf55\ud83c\udf55".'),(0,a.kt)("div",d({},{className:"snack-player","data-snack-name":"Handling Text Input","data-snack-description":"Example usage","data-snack-files":"%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%5Cnimport%20%7B%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%5Cn%5Cnexport%20default%20class%20PizzaTranslator%20extends%20Component%20%7B%5Cn%20%20constructor(props)%20%7B%5Cn%20%20%20%20super(props)%3B%5Cn%20%20%20%20this.state%20%3D%20%7Btext%3A%20''%7D%3B%5Cn%20%20%7D%5Cn%5Cn%20%20render()%20%7B%5Cn%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%3CView%20style%3D%7B%7Bpadding%3A%2010%7D%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CTextInput%5Cn%20%20%20%20%20%20%20%20%20%20style%3D%7B%7Bheight%3A%2040%7D%7D%5Cn%20%20%20%20%20%20%20%20%20%20placeholder%3D%5C%22Type%20here%20to%20translate!%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20onChangeText%3D%7B(text)%20%3D%3E%20this.setState(%7Btext%7D)%7D%5Cn%20%20%20%20%20%20%20%20%20%20value%3D%7Bthis.state.text%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%3CText%2
10style%3D%7B%7Bpadding%3A%2010%2C%20fontSize%3A%2042%7D%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%7Bthis.state.text.split('%20').map((word)%20%3D%3E%20word%20%26%26%20'%F0%9F%8D%95').join('%20')%7D%5Cn%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20)%3B%5Cn%20%20%7D%5Cn%7D%22%7D%7D","data-snack-dependencies":"","data-snack-platform":"web","data-snack-supported-platforms":"ios,android,web","data-snack-theme":"light","data-snack-preview":"true","data-snack-loading":"lazy","data-snack-device-android":"pixel4","data-snack-device-ios":"iphone12"})),(0,a.kt)("p",null,"In this example, we store ",(0,a.kt)("inlineCode",{parentName:"p"},"text")," in the state, because it changes over time."),(0,a.kt)("p",null,"There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the ",(0,a.kt)("a",d({parentName:"p"},{href:"https://reactjs.org/docs/forms.html#controlled-components"}),"React docs on controlled components"),", or the ",(0,a.kt)("a",d({parentName:"p"},{href:"/docs/0.61/textinput"}),"reference docs for TextInput"),"."),(0,a.kt)("p",null,"Text input is one of the ways the user interacts with the app. Next, let's look at another type of input and ",(0,a.kt)("a",d({parentName:"p"},{href:"/docs/0.61/handling-touches"}),"learn how to handle touches"),"."))}g.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.