react 텍스트 입력하고 button 누르면 console창에 출력되게 하는 화면 만들기 (typescript/TextUnput/Button)

 

 

App.tsx

 

import React, { useState } from "react";
import { Button, Text, TextInput, View } from "react-native";

let glTag:String

//사용되지 않는 함수
function MyFunc(props:any){
  console.log(props.name)

  props.setText('Money')

  return <Text>{props.name}</Text>
}



export default function App(){

const [ inputTextValue, setInputTextValue ] =useState("")
const [text,setText] = useState("")


//setInputTextValue에 text값을 입력하는 함수
const handleChange = (event:any)=>{
  const {eventCount, target, text} = event.nativeEvent //기본이벤트
  setInputTextValue(text)

}

//버튼 누를때 호출되는 함수
function handleClick(){
  console.log(inputTextValue)
  console.log(text)

}

return(
  <View>
    <Text>I Love {text}</Text>

    <TextInput value={inputTextValue} onChange={handleChange} placeholder="onChange"/>
    <TextInput onChangeText={text=>setText(text)} placeholder="onChangeText"/>

    <Button title="button" onPress={handleClick}/>

  </View>


)

}

 

 

실행화면

TextInput 란에 Cat과 Dog을 입력한후 Button을 누르면

콘솔창에는 아래와 같이 출력된다.