React.js를 사용하는 양식에 대한 동적 드롭다운 선택 옵션

양식의 드롭다운 옵션은 내 react-redux/ruby on rails 프로젝트, RuneScape 테마 작업 빙고, 보기 가능here(heroku에서 호스팅됨) 기능의 중요한 측면입니다.

저는 결과에 만족했고 HTML 기반에서 시작하여 반응과 함께 동적으로 사용하기까지 결과를 어떻게 구축했는지 보여주고 싶었습니다.
양식의 기본부터 시작합니다. (프로젝트에 더 많은 입력이 있었지만 이 예제에서는 "선택"및 "제출"부분만)

return(
      <form>
        <label>Which team are you submitting for? </label>
        <select name="team">
          <option>Select A Team</option>
          {//teams need to populate as <option> tags}
        </select>
        <button type="submit">Submit</button>
      </form>
)

거기에서 상태 및 변경 처리 또는 제출과 같은 반응 요소를 통합합니다.

const [formState, setFormState] = useState(initialState)
function handleSubmit(e){
  e.preventDefault()
  //patch request to backend and reset form state
}
const handleChange = (e) => {
    const { name, value } = e.target
    setFormState((prevState) => ({...prevState, [name]: value}))
}
return(
      <form onSubmit={(e) => handleSubmit(e)}>
        <label>Which team are you submitting for? </label>
        <select name="team" value={formState.team} onChange={handleChange}>
          <option>Select A Team</option>
          {//teams need to populate as <option> tags}
        </select>
        <button type="submit">Submit</button>
      </form>
)

이제 내용을 상태로 유지하고 제출 시 패치 요청을 보내는 양식의 기본 사항이 있습니다. 나머지 옵션은 redux 스토어에 있는 활성 "게임"에서 가져옵니다. 다음을 사용하여 이 구성 요소로 가져옵니다.

  const activeGame = useSelector ((state) => state.game.value)

우리의 게임 개체에는 연결된 팀이 있는 보드 배열이 있으므로 .map을 사용하여 각 팀이 태그를 채울 구성 요소를 만들 수 있습니다.

        <select name="team" value={formState.team} onChange={handleChange}>
          <option>Select A Team</option>
          {activeGame.boards.map(board => <option key={board.team.id}>{board.team.team_name}</option>)}
        </select>

React의 직관적인 특성 덕분에 자바스크립트로 몇 달만 코딩해도 꽤 간단하게 수행할 수 있습니다. 양식에 대한 선택 옵션을 만드는 다른 방법이나 더 나은 방법이 있는 경우 아래에서 공유해 주세요. 저는 항상 제 방식을 개선하기 위해 노력하고 있습니다.