React#7_생활코딩-Update

배열을 복제하는법

var b = Array.from(a);
a의 배열이 b에 그대로 복제 되지만 a === b 는 false임

객체를 복제하는 법

var b = Object.assign(a);

b바꾸기
b.name = "내용"

render안에 코드를 따로 함수로 만들어서 넣기

getReadContent(){ //while문으로 클릭한 id와 맞을 경우에는 그 content를 리턴함
  //내용
}
getContent(){ //누른 컴포넌트에 해당되는 컴포넌트를 보여줌
  //내용
}

함수 사용법-->this.getReadContent()

props로 들어온 값을 state로 바꾸기

 constructor(props){
    super(props);
    this.state = { //props로 들어온 값을 state로 만들기
      title:this.props.data.title, //data로 받은 title을 title에 넣음
      desc:this.props.data.desc  //data로 받은 desc을 desc에 넣음
    }
    this.inputFormHandler = this.inputFormHandler.bind(this);
  }
  inputFormHandler(e){
    this.setState({[e.target.name]:e.target.value});
  }

inputFormHandler()함수

onChange={function(e){
  this.setState({title:e.target.value}); //현재 수정하는 내용으로 state값이 바뀌어서 title에 전달된다.
}.bind(this)}

inputFormHandler(e){
    this.setState({[e.target.name]:e.target.value}); //[e.target.name]는 이벤트가 발생한 코드의 이름이 뭔지 알아와줌 --> 따라서, title이 바뀌었으면 title에 바뀐 value가 들어가고, desc가 바뀌었으면 desc에 바뀐value가 들어간다.
  }
onChange={this.inputFormHandler} //변화될 때 함수 사용하기

form에서 submit버튼을 눌렀을 때 함수 실행하기

onSubmit={function(e){
  this.props.onSubmit( //App.js에서 이 컴포넌트안의 onSubmit함수를 여기서 실행
    e.target.title.value, //현재 title을 함수인자로 넘겨줌
    e.target.desc.value  //현재 desc을 함수인자로 넘겨줌
  );
}

input 태그의 onChange함수

 inputFormHandler(e){  //이벤트 받은 e의 target인 input 태그의 name에 value를 넣어줌
    this.setState({[e.target.name]:e.target.value});
  }
 <input name="title" value="{this.state.title}" onChange={this.inputFormHandler}></input>

value="{this.state.title}"는 현재 update form을 수정하기 전, 이전 게시물에서 받아온 내용들임.
따라서, 수정하면 state가 바뀌도록 구현해야한다.

onChange={this.inputFormHandler} //바뀌면 함수 호출하게됨