React JSX : <select> 옵션에서 "selected"를 가져오기.

질문 : React JSX : 선택에서 "선택됨"선택선택권

---

<select> 메뉴의 React 컴포넌트에서 애플리케이션 상태를 반영하는 옵션에 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>
    );
  });

// pass {options} to the select menu jsx

그러나 JSX 컴파일에서 구문 오류가 발생합니다.

이렇게하면 구문 오류가 제거되지만 분명히 문제가 해결되지는 않습니다.

var selected = (optionState === option.value) ? 'selected' : 'false';

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

나는 또한 이것을 시도했다 :

var selected = (optionState === option.value) ? true : false;

<option value={option.value} {selected ? 'selected' : ''}>{option.label}</option>

이 문제를 해결하는 권장 방법이 있습니까?

답변

---

React는 이것을 훨씬 더 쉽게 만듭니다. 각 옵션에서 selected 를 정의하는 대신 select 태그 자체에 value={optionsState} 를 작성할 수 있습니다.

<select value={optionsState}>
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

자세한 내용 은 React select 태그 doc를 참조하세요.

또한 React는 이러한 목적으로 부울을 자동으로 이해하므로 간단히 작성할 수 있습니다 (참고 : 권장하지 않음).

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

그리고 적절하게 '선택됨'을 출력합니다.

출처 : https://stackoverflow.com/questions/21733847/react-jsx-selecting-selected-on-selected-select-option