카테고리 없음

리액트 JSX: 선택된 <select> 옵션에 "selected" 선택

스택큐힙리스트 2023. 12. 22. 10:47
반응형

리액트 컴포넌트에서 <select> 메뉴에 selected 속성을 설정해야 합니다. 이 속성은 애플리케이션 상태를 반영하는 옵션에 적용되어야 합니다.


render() 함수 내에서 optionState는 상태 소유자로부터 SortMenu 컴포넌트로 전달됩니다. 옵션 값들은 JSON을 통해 props로 전달됩니다.


render: function() {
  var options = [],
      optionState = this.props.optionState;
  this.props.options.forEach(function(option) {
    var selected = (optionState === option.value) ? ' selected' : '';
    options.push(
      <option value={option.value}{selected}>{option.label}</option>
    );
  });
// {options}을 select 메뉴 jsx에 전달

그러나 이렇게 하면 JSX 컴파일 시 문법 오류가 발생합니다.


이렇게 하면 문법 오류는 사라지지만 문제를 해결하지는 못합니다:

이렇게도 시도해 봤습니다:


var selected = (optionState === option.value) ? true : false;
<option value={option.value} {selected ? 'selected' : ''}>{option.label}</option>

문제를 해결하는 권장 방법이 있을까요?

답변 1

리액트는 이 작업을 더 쉽게 만들어줍니다. 각 옵션에 selected을 정의하는 대신, 선택한 옵션은 value={optionsState}을 select 태그 자체에 간단히 작성할 수 있습니다:


<select value={optionsState}>
  <option value=A>사과</option>
  <option value=B>바나나</option>
  <option value=C>크랜베리</option>
</select>

더 많은 정보는 리액트 선택 태그 문서를 참조하세요.


또한, 리액트는 이 목적으로 부울 값을 자동으로 이해하기 때문에, 간단히 (참고: 권장하지 않음)


<option value={option.value} selected={optionsState == option.value}>{option.label}</option>

를 작성하면 'selected'를 적절히 출력합니다.

답변 2

React JSX: selected 속성을 사용하여 선택된 요소의 선택된 옵션을 설정하는 방법에 대해 알아보겠습니다.




```
위 코드에서 selected 속성이 있는
반응형