2020/2/20 기록

나는 왜 인덱스에 자변수로 줄 수 없는지 생각하면서 이 기사를 썼는데, 마침내 방법을 알고 웃었다
.js

handleChange_todohuken = (e, index) => {)

<Autocomplete
  onChange={e => this.handleChange_todohuken(e, input)}
>

끝웃음

어려운 상황

이번에 우리는 동적으로 Form을 등록하고 싶은 수량을 준비합니다. react의 설치이기 때문에state가 From에서 입력한 값을 가지게 하려고 합니다. 이때 반드시 고려해야 할 것은 동적으로 준비한 어떤 state가 변경되었는지 판정하기 위해서입니다. 이 Form이 몇 번째 index인지 얻으려고 합니다.

해결 방법

구성 요소의 id에 index 번호를 넣고 꺼냅니다.
.js

handleChange_concert = e => {
  const index = e.target.id.split(' ')[0].replace('index', '');

  // stateの配列を更新するためコピー先の配列全体を変更する
  const concerts_copy = this.state.concerts.slice();
  concerts_copy[index] = e.target.value;
  this.setState({ concerts: concerts_copy });
}

{this.state.inputs.map(input =>
  <div key={input}>
    <TextField
      label="ライブ名"
      id={`index${input} standard-basic`}
      onChange={this.handleChange_concert}
      value={this.state.concerts[input]}
      required
    />
  </div>
)}

MaterialUI의 Autocomplete 문제

여기 있습니다.todohukens의 배열에서 도도부 현명을 저장하는 일은 상당히 고민스럽고 시간이 걸렸다
최초의 autocomplete의 TextField는 onChange를 가지고 있다. 물론 옵션에서 선택한 도도부 현 이름이 아니라 키보드만 입력한 값을 저장한다.
Autocomplete를 onChange로 설정하면 옵션에서 값을 선택할 때 리셋 함수가 이동하기 때문에 정상적으로 값을 얻을 수 있습니다.
.js

<Autocomplete
  id={`index${input} combo-box-demo`}
  options={options}
  getOptionLabel={option => option.label}
  onChange={this.handleChange_todohuken}
  style={{ width: 300 }}
  renderInput={params => (
    <TextField {...params}
      label="都道府県"
      id="standard-basic"
      required
      fullWidth
    />
  )}
/>

또한 Autocomplete에서 선택한 도도부현 이름을 빈 문자로 되돌려주는 x 단추를 텍스트 필드 오른쪽에 설정했지만 이번 index 처리에서 e.target을 사용했기 때문에 클릭 요소가 바뀌면 index의 취법도 바뀌어야 한다. 방법은 전혀 똑똑하지 않다.
이 일대를 어떻게 react로 예쁘게 쓰는지 알려주세요~
.js

handleChange_todohuken = e => {
  // 都道府県プルダウン操作した時
  let index;
  if (e.target.id){
    index = e.target.id.split(' ')[0].replace('index', '');
  }
  // 右のxボタンで都道府県名を消した場合
  else{
    index = e.target.parentElement.parentElement.parentElement.parentElement.querySelector('input').id.split(' ')[0].replace('index', '');
  }
  const str = e.target.innerHTML[0] == '<' ? '' : e.target.innerHTML;

  // stateの配列を更新するためコピー先の配列全体を変更する
  const todohukens_copy = this.state.todohukens.slice();
  todohukens_copy[index] = str;
  this.setState({ todohukens: todohukens_copy });
}