addTodo.js 923 Bytes
Newer Older
YoonDongMin's avatar
YoonDongMin committed
1
import React, {useState} from 'react';
YoonDongMin's avatar
부채    
YoonDongMin committed
2
3
import {StyleSheet, Text,View, TextInput, Button} from 'react-native'; //추가하기 때문에TextInput, Button을 import 함

YoonDongMin's avatar
YoonDongMin committed
4
5

export default function AddTodo({submitHandler}) {
YoonDongMin's avatar
부채    
YoonDongMin committed
6
    const [text, setText] = useState(''); //empty string
YoonDongMin's avatar
YoonDongMin committed
7
8
9
10
11
12
13
14
15

    const changeHandler = (val) => {
        setText(val);
    }

    return(
        <View>
            <TextInput
                style = {styles.input}
YoonDongMin's avatar
부채    
YoonDongMin committed
16
17
                placeholder = 'new todo...' //처음에 나오는 text
                onChangeText={changeHandler} //value 받은 것 저장
YoonDongMin's avatar
YoonDongMin committed
18
            />
YoonDongMin's avatar
부채    
YoonDongMin committed
19
            <Button onPress= {() =>submitHandler(text)} title = '입력' color = 'coral' />
YoonDongMin's avatar
YoonDongMin committed
20
21
22
23
24
25
26
27
28
        </View>
    )
}

const styles = StyleSheet.create({
    input: {
        marginBottom: 10,
        paddingHorizontal: 8,
        paddingVertical:6,
YoonDongMin's avatar
부채    
YoonDongMin committed
29
        borderBottomColor: '#ddd', //light grey
YoonDongMin's avatar
YoonDongMin committed
30
31
32
33
        borderBottomWidth: 1

    }
})