[Wecode 49~50일차] rebase, multi select-box

1. 깃으로 리베이스 하기전 pull할 경우 이미 많은 내용들을 가져오고.. 그 값들을 리베이스 처리하게 되면 혼란이 오게된다.

그럴때, 내가쓴 커밋만 리베이스 하는 명령어.

git rebase --preserve-merges origin/master

2. multi select box 

multi input창하고 아주유사하다.

 

 1) option 부모태그에 onChange를 주고 props로 넘겨서 관리한다.

 2) 선택값들에 대한 이름도 props로 넘겨서 사용하고자 하는 부모컴포넌트에서 이름으로 구분한다. 

const SelectBox = ({
  handleSelectedChange,
  selectName,
  location1,
  location2,
  location3
}) => {
  return (
    <div className="root_selectbox">
      <select
        name={selectName}
        className="clickSelected"
        onChange={handleSelectedChange}
      >
        <option value={location1}>{location1}</option>
        <option value={location2}>{location2}</option>
        <option value={location3}>{location3}</option>
      </select>
    </div>
  );
};

3) 선택했을때 선택값 이름이 state에 들어가야 백엔드로 보낼때 보기가 편해서 option의 value값을 option의 내용물과 맞춰준다.

4) 부모태그쪽에서는 multi input과 똑같이 함수를 작성해주면 된다.

 //select box
  handleSelectedChange = e => {
    console.log(e.target.value);
    const selectValue = e.target.value;
    const name = e.target.name;

    this.setState({
      [name]: selectValue
    });
  };

3. 파일업로드 버튼 눌렀을 경우, system에서 선택하는 화면띄우기

  1) input 태그의 타입을 file 로 해주면 => 이놈과 같이 나온다   "

"로 변경한다.

  2) onloadend 콜백함수를 작성해준다.

imgUproad = e => {
   let reader = new FileReader();
   let file = e.target.files[0];
   reader.onloadend = () => {
     this.setState({ ...this.state, imgArr: reader.result });
   };
   if (file) {
     reader.readAsDataURL(file);
   }
 };