React JSX : 선택된 <select> 옵션에서“selected”선택

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

에서는 render()의는 optionStateSortMenu 구성 요소 상태 소유자로부터 전달됩니다. 옵션 값은 propsJSON 에서와 같이 전달됩니다 .

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는 이러한 목적으로 부울을 자동으로 이해하므로 간단히 쓸 수 있습니다 (참고 : 권장하지 않음)

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

'selected'가 적절하게 출력됩니다.

그러나 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 tag doc을 참조하십시오 .

의 "selected"속성을 설정하려고 할 때 React가 경고하는 것을 수행 할 수 있습니다 <option>.

사용 defaultValue또는 value에 소품을 <select>대신 설정에 selected에 <option>.

그래서, 당신 은 당신의 선택 options.value에 사용할 수 있습니다defaultValue

여기에 최고의 답변과 그 아래의 주석이 통합 된 완벽한 솔루션이 있습니다 (누군가가 그것을 모두 모으기 위해 고군분투하는 데 도움이 될 수 있음).

ES6 업데이트 (2019)-화살표 기능 및 객체 구조화 사용

주요 구성 요소에서 :

class ReactMain extends React.Component {

  constructor(props) {
    super(props);
    this.state = { fruit: props.item.fruit };
  }

  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  }

  saveItem = () => {
    const item = {};
    item.fruit = this.state.fruit;
    // do more with item object as required (e.g. save to database)
  }

  render() {
    return (
      <ReactExample name="fruit" value={this.state.fruit} handleChange={this.handleChange} />
    )
  }

}

포함 된 구성 요소 (현재 상태 비 저장 기능) :

export const ReactExample = ({ name, value, handleChange }) => (
  <select name={name} value={value} onChange={handleChange}>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>
)

이전 답변 (바인드 사용) :

주요 구성 요소에서 :

class ReactMain extends React.Component {

  constructor(props) {
    super(props);
    // bind once here, better than multiple times in render
    this.handleChange = this.handleChange.bind(this);
    this.state = { fruit: props.item.fruit };
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  saveItem() {
    const item = {};
    item.fruit = this.state.fruit;
    // do more with item object as required (e.g. save to database)
  }

  render() {
    return (
      <ReactExample name="fruit" value={this.state.fruit} handleChange={this.handleChange} />
    )
  }

}

포함 된 구성 요소 (현재 상태 비 저장 기능) :

export const ReactExample = (props) => (
  <select name={props.name} value={props.value} onChange={props.handleChange}>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>
)

기본 구성 요소는 과일에 대해 선택된 값을 유지하고 (상태) 포함 된 구성 요소는 선택 요소를 표시하고 업데이트는 기본 구성 요소로 다시 전달되어 상태를 업데이트합니다 (선택한 값을 변경하기 위해 포함 된 구성 요소로 루프백 됨).

이름 소품을 사용하면 유형에 관계없이 동일한 양식의 다른 필드에 대해 단일 handleChange 메소드를 선언 할 수 있습니다.

여기에 최신 방법이 있습니다. 에서이 문서를 반응 플러스 자동 바인딩 "지방 화살표"메서드 구문.

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};
  }

  handleChange = (event) =>
    this.setState({value: event.target.value});

  handleSubmit = (event) => {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
} 

선택 태그의 첫 번째 옵션으로 추가하기 만하면됩니다.

<option disabled hidden value=''></option>

이것이 기본값이되고 유효한 옵션을 선택하면 해당 주에서 설정됩니다.

***Html:***
<div id="divContainer"></div>

var colors = [{ Name: 'Red' }, { Name: 'Green' }, { Name: 'Blue' }];
var selectedColor = 'Green';

ReactDOM.render(<Container></Container>, document.getElementById("divContainer"));

var Container = React.createClass({
    render: function () {
        return (
        <div>            
            <DropDown data={colors} Selected={selectedColor}></DropDown>
        </div>);
    }
});

***Option 1:***
var DropDown = React.createClass(
{
    render: function () {
        var items = this.props.data;
        return (
        <select value={this.props.Selected}>
            {
                items.map(function (item) {
                    return <option value={item.Name }>{item.Name}</option>;
                })
            }
        </select>);
    }
});

***Option 2:***
var DropDown = React.createClass(
{
    render: function () {
        var items = this.props.data;
        return (
        <select>
            {
                items.map(function (item) {
                    return <option value={item.Name} selected={selectedItem == item.Name}>{item.Name}</option>;
                })
            }
        </select>);
    }
});

***Option 3:***
var DropDown = React.createClass(
    {
        render: function () {
            var items = this.props.data;
            return (
            <select>
                {
                    items.map(function (item) {

                                            if (selectedItem == item.Name)
                    return <option value={item.Name } selected>{item.Name}</option>;
                else
                    return <option value={item.Name }>{item.Name}</option>;
                    })
                }
            </select>);
        }
    });

상태가 변경 될 때 <select>태그가 올바른 것으로 업데이트되지 않는 문제가있었습니다 <option>. 내 문제는 미리 연속적으로 두 번 연속으로 렌더링하면 미리 선택 하지 않고 두 번째로 렌더링 <option>하면 <select>태그가 두 번째 렌더링에서 업데이트되지 않지만 기본적으로 유지됩니다.

refs 사용하여 이것에 대한 해결책을 찾았습니다 . <select>태그 노드 (일부 컴포넌트에 중첩 될 수 있음)에 대한 참조를 가져 와서 후크 value에서 속성 을 수동으로 업데이트해야 합니다 componentDidUpdate.

componentDidUpdate(){
  let selectNode = React.findDOMNode(this.refs.selectingComponent.refs.selectTag);
  selectNode.value = this.state.someValue;
}

MULTISELECT / optgroups에 대한 비슷한 답변 게시 :

render() {
  return(
    <div>
      <select defaultValue="1" onChange={(e) => this.props.changeHandler(e.target.value) }>
        <option disabled="disabled" value="1" hidden="hidden">-- Select --</option>
        <optgroup label="Group 1">
          {options1}
        </optgroup>
        <optgroup label="Group 2">
          {options2}
        </optgroup>
      </select>
    </div>
  )
}

간단한 해결책이 HTML 기본을 따르고 있습니다.

<input
  type="select"
  defaultValue=""
  >
  <option value="" disabled className="text-hide">Please select</option>
  <option>value1</option>
  <option>value1</option>
</input>

.text-hide 부트 스트랩을 사용하지 않는 경우 부트 스트랩 클래스입니다.

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

defaultProps를 설정하여 비슷한 문제를 해결했습니다.

ComponentName.defaultProps = {
  propName: ''
}

<select value="this.props.propName" ...

이제 마운트 할 때까지 소품이 존재하지 않으면 컴파일 오류가 발생하지 않습니다.