[React] 리액트<input> 태그의 값에 접근, 'Enter' 키 이벤트 enter key event javascript

정답을 제출할 때, 엔터키를 눌러도, 제출 버튼을 눌러도 input 태그 안의 내용이 제출될 수 있도록 해야했다.

1. input 태그의 값을 Hook으로 관리

2. input이 입력될 때마다 State를 업데이트

3. input tag의 onKeyDown 이벤트 핸들러를 설정하여 엔터키를 누를 시 값이 제출되도록 설정

4. 제출 버튼에 onClick 이벤트 핸들러를 설정하여 값이 제출되도록 설정

1. 'input' 태그의 값을 관리할 useState훅을 선언

1. useState 훅을 사용하여 입력된 값을 관리할 State를 선언
```javascript
import { useState } from 'react';
const ShortAnswer = () => {
  const [answer, setAnswer] = useState('');
    };
  return (
    <>
      <h2>Short Answer</h2>
      <div style={styles.codeContainer}>
        <StyleToPythonCode codeString={testQuizContent.content} />
      </div>
      <div style={styles.inputDiv}>
        <input type="text"/>
        <button>제출</button>
      </div>
    </>
  );
};
export default ShortAnswer;
```

2. 'input'에 접근, 입력이 일어날 때마다 answer 업데이트

• 3번의 onKeyDown 핸들러에서 setAnswer를 호출했을 때는 마지막 입력키가 나오지 않았다.
• onChange 이벤트 핸들러에서 호출하여 input값이 변할 때마다 값을 갱신

const onInputChange(e) => {
  console.log(e.target.value);
  setAnswer(e.target.value);
} 

<input style={styles.answerInput} type="text" onChange={onInputChange} />

3. input tag의 onKeyDown 이벤트 핸들러를 지정

keypress  event는 deprecated 됨 (권장하지 않음)

MDN keypress event : https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event

Element: keypress event - Web APIs | MDN

onKeyDown 이벤트 핸들러를 사용하여 엔터키가 입력되었을 때, 제출이 일어나도록 지정

handleSubmit 함수는 버튼의 onClick 핸들러에 재사용하기 위해 분리

  const handleKeyDown = (e) => {
    if (e.key == 'Enter') {
      handleSubmit();
    }
  };
  const handleSubmit = () => {
    // 여기 제출하는 함수 작성하시면 됩니다!
    alert(`${answer}제출됨`);
  };

 <input style={styles.answerInput} type="text" onChange={onInputChange} onKeyDown={handleKeyDown} />

4. 버튼의 onClick 에도 같은 함수 적용

최종 코드

import { borderRadius, height, minWidth, padding, style } from '@mui/system';
import StyleToPythonCode from '../StyleToPythonCode';
import { useState } from 'react';

// style, data 생략
const ShortAnswer = () => {
  const [answer, setAnswer] = useState('');

  const onInputChange = (e) => {
    console.log(e.target.value);
    setAnswer(e.target.value);
  };
  const handleKeyDown = (e) => {
    if (e.key == 'Enter') {
      handleSubmit();
    }
  };
  const handleSubmit = () => {
    // 여기 제출하는 함수 작성하시면 됩니다!
    alert(`${answer}제출됨`);
  };
  return (
    <>
      <h2>Short Answer</h2>
      <div style={styles.codeContainer}>
        <StyleToPythonCode codeString={testQuizContent.content} />
      </div>
      <div style={styles.inputDiv}>
        <input style={styles.answerInput} type="text" onChange={onInputChange} onKeyDown={handleKeyDown} />
        <button style={styles.submitButton} onClick={handleSubmit}>
          제출
        </button>
      </div>
    </>
  );
};

export default ShortAnswer;