e.target.value를 사용하여 input 라벨의value 속성을 관리한다는 뜻을 몰라서 조사했습니다.

다음 코드는 도대체 무엇을 하고 싶습니까?

input에 입력한 값을 꺼내고useState를 통해 관리하기를 원합니다.

입력한 값을 사용하여 발언하거나 편집할 수 있기 때문입니다.

HogeHoge

const HogeHoge = () => {
  const [neko, setNeko] = useState({ title: '' })
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setNeko({
      ...neko,
      [e.target.name]: e.target.value,
    })
  }
  return (
    <div>
      <label htmlFor="title">タイトル</label>
      <input
        type="text"
        name="title"
        id="title"
        onChange={handleChange}
        value={neko.title}
      />
    </div>
  )
}
export default HogeHoge

우선useState를 사용하여 neko의 초기 값을 설정합니다.
여기에서 키가 title이고 값이 비어 있는 대상을neko의 초기 값으로 설정합니다.
HogeHoge

  const [neko, setNeko] = useState({ title: '' })

그리고 setNeko라는 업데이트 함수로 neko의 값을 업데이트합니다

여기서 네코의 초기 값을 전자 표 형식으로 펼친다.즉 ...neko 제출title: ''한 것이다.빈 값은 setNeko의 객체로 대입됩니다.어쨌든 대상은 이미 복제되었다.

그리고 [e.target.name]:e.target.value 값 삽입HogeHoge

  const [neko, setNeko] = useState({ title: '' })
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setNeko({
      ...neko,
      [e.target.name]: e.target.value,
    })
  }

객체 클론의 예

const foo = { a: 1, b: 2 };
const bar = { ...foo }; // => { a: 1, b: 2 }

[e.target.name]: e.target.이른바 value

는 input 라벨의name값과 input 라벨의value값을 가리킨다.

이번name는title,value는neko.title이다.이렇게 하면 input 라벨이 2개 3개가 추가되었어도name 속성과value 속성을 참조하기 때문에state로 입력 값을 관리할 수 있습니다.

또한value 속성은 입력 값 자체를 가리킨다.즉, 이번neko라는 대상의 타이틀 값은 input 탭의value 속성입니다.

HogeHoge

      <input
        type="text"
        name="title"
        id="title"
        onChange={handleChange}
        value={neko.title}
      />

컨트롤러로 네코의 출력을 보세요.
HogeHoge

  const [neko, setNeko] = useState({ title: '' })
  console.log(neko)
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setNeko({
      ...neko,
      [e.target.name]: e.target.value,
    })
  }

처음에는 빈 문자열이었습니다. 문자를 입력하면value 속성의 값이 setNeko로 전송되고neko가 업데이트됩니다.

이 네코를 API 및 DB 통신에 적용함으로써 발언 기능과 편집 기능을 제작할 수 있다.