[todo_app_7] todo목록 수정

app.js에서 todo목록을 관리, 컨트롤 하고 있다

todo.js에서 수정할 때, app.js에서 props를 받아오고 싶음 => 그래야수정할때 자연스럽게 연출됨

수정할 때 텍스트인풋이 떠야하고, 그 안에 value가 있어야함.

todo.js

const { text } = this.props;

{ isEditing ?

<TextInput

style={[

styles.text, styles.input,

isCompleted ? styles.completedText : styles.uncompletedText]}

value={toDoValue}

multiline={true}

onChangeText={this._controlInput}

returnKeyType={"done"}

onBlur={this._finishEdition}

/> : (<Text

style={[

styles.text,

isCompleted ? styles.completedText : styles.uncompletedText

]}>

{ text }

</Text>)}

app.js

<ScrollView contentContainerStyle={styles.toDos}>

<ToDo text={"text"}/>)

</ScrollView>

편집을 했을 때, 해당 텍스트를 복사해서 state에 보내기

todo.js

state = {

toDoValue: ' '

};

편집중일때는 textinput, 아닐때는 text

{ isEditing ?

<TextInput

style={[

styles.text,

styles.input,

isCompleted ? styles.completedText : styles.uncompletedText

]}

value={toDoValue}

multiline={true}

/> : (<Text

style={[

styles.text,

isCompleted ? styles.completedText : styles.uncompletedText

]}>

{ text }

</Text>)}

스타일 지정

input: {

marginVertical: 15,

width: width/2,

paddingBottom: 5

}

수정시, 텍스트 뜨는것 구현부분

_startEditing = () => {

const {text} = this.props;

this.setState({ isEditing: true, todoValue: text});

};

todoValue를 컨트롤하는 함수를 따로 빼준다.

_controlInput = (text) => {

this.setState({

toDoValue:text

});

};

수정하면, 컨트롤함수를 호출하고

키타입은 done으로, 무언가를 쓰다가 칸 밖을 클릭하면 종료되도록 한다(onBlur)

onChangeText={this._controlInput}

returnKeyType={"done"}

onBlur={this._finishEdition}