React에서 여러 옵션을 사용하여 <select>에서 값 검색

선택 상자에 대해 선택된 옵션을 설정하는 React 방법은 선택 하려는 요소 의 속성에 해당 하는 특수 value소품을 <select>자체 에 설정하는 것입니다. A의 선택이 소품 대신 배열을 받아 들일 수 있습니다.value<option>multiple

이제 이것은 특별한 속성이기 때문에 사용자가 항목을 변경할 때 동일한 옵션 값 구조에서 선택한 옵션 을 검색 하는 표준 방법이 무엇인지 궁금합니다 (콜백을 통해 아마도 valueDOM 요소 에서 동일한 속성을 사용할 수 없기 때문입니다.

예제를 사용하려면 텍스트 필드를 사용하여 다음과 같은 작업을 수행합니다 (JSX).

var TextComponent = React.createClass({
  handleChange: function(e) {
    var newText = e.target.value;
    this.props.someCallbackFromParent(newText);
  },
  render: function() {
    return <input type="text" value={this.props.someText} onChange={this.handleChange} />;
  }
});

???이 다중 선택 구성 요소 를 대체하는 것과 동등한 것은 무엇입니까 ?

var MultiSelectComponent = React.createClass({
  handleChange: function(e) {
    var newArrayOfSelectedOptionValues = ???;
    this.props.someCallbackFromParent(newArrayOfSelectedOptionValues);
  },
  render: function() {
    return (
      <select multiple={true} value={this.props.arrayOfOptionValues} onChange={this.handleChange}>
        <option value={1}>First option</option>
        <option value={2}>Second option</option>
        <option value={3}>Third option</option>
      </select>
    );
  }
});

로 Array.from()와 e.target.selectedOptions당신은 제어 선택 - 다중을 수행 할 수 있습니다 :

handleChange = (e) => {
  let value = Array.from(e.target.selectedOptions, option => option.value);
  this.setState({values: value});
}

target.selectedOptions는 HTMLCollection을 반환합니다.

https://codepen.io/papawa/pen/XExeZY

변경 이벤트의 대상으로 실제 DOM 노드를 사용하고 있기 때문에 다른 곳에서도 동일한 방식으로 수행합니다.

handleChange: function(e) {
  var options = e.target.options;
  var value = [];
  for (var i = 0, l = options.length; i < l; i++) {
    if (options[i].selected) {
      value.push(options[i].value);
    }
  }
  this.props.someCallback(value);
}

가장 쉬운 방법...

handleChange(evt) {
  this.setState({multiValue: [...evt.target.selectedOptions].map(o => o.value)}); 
}

사용하려는 경우 다음 ref과 같이 선택한 값을 얻을 수 있습니다.

var select = React.findDOMNode(this.refs.selectRef); 
var values = [].filter.call(select.options, function (o) {
      return o.selected;
    }).map(function (o) {
      return o.value;
    });

2018 ES6 업데이트

  let select = this.refs.selectRef;
  let values = [].filter.call(select.options, o => o.selected).map(o => o.value);

양식을 작성하는 동안 선택한 옵션을 추적하려는 경우 :

handleChange(e) {
    // assuming you initialized the default state to hold selected values
    this.setState({
        selected:[].slice.call(e.target.selectedOptions).map(o => {
            return o.value;
        });
    });
}

selectedOptionsDOM과 관련된 배열과 같은 컬렉션 / 요소 목록입니다. 옵션 값을 선택할 때 이벤트 대상 개체에서 액세스 할 수 있습니다. Array.prototype.slice그리고 call우리가 새로운 상태에 대한 복사본을 만들 수 있습니다. 질문에 대한 또 다른 대답 인 ref (이벤트를 캡처하지 않는 경우)를 사용하여 이러한 방식으로 값에 액세스 할 수도 있습니다.

실제로 selectedOptions타겟 내부를 찾을 수 있습니다. 모든 옵션을 반복 할 필요가 없습니다. onChange컴포넌트에 props로 전달 된 함수에 값을 보내고 싶다고 가정 해 봅시다 onChange. 다중 선택 에서 다음 함수를 사용할 수 있습니다 .

onSelectChange = (e) => {
    const values = [...e.target.selectedOptions].map(opt => opt.value);
    this.props.onChange(values);
  };

다음은 나를 위해 일했습니다.

var selectBoxObj = React.findDOMNode(this.refs.selectBox)
var values = $(selectBoxObj).val()

이를 수행하는 또 다른 방법 :

handleChange({ target }) {
    this.props.someCallback(
       Array.prototype.slice.call(target.selectedOptions).map(o => o.value)
    )
}

이걸로 해봐:

dropdownChanged = (event) => {
    let obj = JSON.parse(event.target.value);
    this.setState(
        {
            key: obj.key,
            selectedName: obj.name,
            type: obj.type
        });
}


<select onChange={this.dropdownChanged} >
<option value={JSON.stringify({ name: 'name', key: 'key', type: "ALL" })} >All Projetcs and Spaces</option></select>