드롭다운에 React JS를 사용한 OnChange 이벤트

드롭다운에 React JS를 사용한 OnChange 이벤트

var MySelect = React.createClass({
     change: function(){
         return document.querySelector('#lang').value;
     },
     render: function(){
        return(
           <div>
               <select id="lang">
                  <option value="select" onChange={this.change}>Select</option>
                  <option value="Java" onChange={this.change}>Java</option>
                  <option value="C++" onChange={this.change}>C++</option>
               </select>
               <p></p>
               <p value={this.change}></p>
           </div>
        );
     }
});

React.render(<MySelect />, document.body);

그onChange이벤트가 작동하지 않습니다.

변경 이벤트가 트리거된 것은<select>요소가 아닌<option>요소.하지만, 그것만이 문제가 아니다.정의한 방법change기능이 컴포넌트를 렌더하지 않습니다.아직 리액트의 개념을 제대로 파악하지 못한 것 같기 때문에, 「Thinking in React」가 도움이 될지도 모릅니다.

선택한 값을 상태로 저장하고 값이 변경되면 상태를 업데이트해야 합니다.상태를 업데이트하면 구성 요소의 렌더가 트리거됩니다.

var MySelect = React.createClass({
     getInitialState: function() {
         return {
             value: 'select'
         }
     },
     change: function(event){
         this.setState({value: event.target.value});
     },
     render: function(){
        return(
           <div>
               <select id="lang" onChange={this.change} value={this.state.value}>
                  <option value="select">Select</option>
                  <option value="Java">Java</option>
                  <option value="C++">C++</option>
               </select>
               <p></p>
               <p>{this.state.value}</p>
           </div>
        );
     }
});

React.render(<MySelect />, document.body);

또, 주의해 주세요.<p>요소에는 다음이 없습니다.value기여하다.React/JSX는 잘 알려진 HTML 구문을 복제할 뿐이며 커스텀 속성을 도입하지 않습니다(단,key그리고.ref선택한 값을 의 콘텐츠로 하는 경우<p>정적 콘텐츠와 마찬가지로 소자를 그 안에 넣기만 하면 됩니다.

이벤트 처리, 상태 및 폼 제어에 대한 자세한 내용은 다음과 같습니다.

• http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
• http://facebook.github.io/react/docs/forms.html

리액트 훅(16.8+):

const Dropdown = ({
  options
}) => {
  const [selectedOption, setSelectedOption] = useState(options[0].value);
  return (
      <select
        value={selectedOption}
        onChange={e => setSelectedOption(e.target.value)}>
        {options.map(o => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};

import React, { PureComponent, Fragment } from 'react';
import ReactDOM from 'react-dom';

class Select extends PureComponent {
  state = {
    options: [
      {
        name: 'Select…',
        value: null,
      },
      {
        name: 'A',
        value: 'a',
      },
      {
        name: 'B',
        value: 'b',
      },
      {
        name: 'C',
        value: 'c',
      },
    ],
    value: '?',
  };

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

  render() {
    const { options, value } = this.state;

    return (
      <Fragment>
        <select onChange={this.handleChange} value={value}>
          {options.map(item => (
            <option key={item.value} value={item.value}>
              {item.name}
            </option>
          ))}
        </select>
        <h1>Favorite letter: {value}</h1>
      </Fragment>
    );
  }
}

ReactDOM.render(<Select />, window.document.body);

  handleChange(value, selectOptionSetter) => {
     selectOptionSetter(value)
     // handle other stuff like persisting to store etc
   }

  const Dropdown = (props) => {
  const { options } = props;
  const [selectedOption, setSelectedOption] = useState(options[0].value);
  return (
      <select
        value={selectedOption}
        onChange={e => handleChange(e.target.value, setSelectedOption)}>
        {options.map(o => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};

다른 컴포넌트에 인라인으로 select를 사용하는 경우 다음과 같이 사용할 수도 있습니다.

<select onChange={(val) => this.handlePeriodChange(val.target.value)} className="btn btn-sm btn-outline-secondary dropdown-toggle">
    <option value="TODAY">Today</option>
    <option value="THIS_WEEK" >This Week</option>
    <option value="THIS_MONTH">This Month</option>
    <option value="THIS_YEAR">This Year</option>
    <option selected value="LAST_AVAILABLE_DAY">Last Availabe NAV Day</option>
</select>

또한 select를 사용하는 컴포넌트에서 다음과 같이 onChange를 처리하는 기능을 정의합니다.

handlePeriodChange(selVal) {
    this.props.handlePeriodChange(selVal);
}

혹시나 도움이 될지도 모르니 여기에 덧붙이겠습니다. 왜냐하면 이게 저에게 도움이 된 해결책이었기 때문입니다.

SELECTED INDEX를 가져옵니다.값 때문이 아닙니다. (옵션 리스트가 숫자 리스트였기 때문에 도움이 되었습니다.)

const [selectedOption, setSelectedOption] = useState(0)
<select onChange={event => setSelectedOption(event.target.options.selectedIndex)}>

감사합니다만, 펠릭스 클링의 답변에 약간의 변경이 필요합니다.

var MySelect = React.createClass({
 getInitialState: function() {
     return {
         value: 'select'
     }
 },
 change: function(event){
     this.setState({value: event.target.value});
 },
 render: function(){
    return(
       <div>
           <select id="lang" onChange={this.change.bind(this)} value={this.state.value}>
              <option value="select">Select</option>
              <option value="Java">Java</option>
              <option value="C++">C++</option>
           </select>
           <p></p>
           <p>{this.state.value}</p>
       </div>
    );
 }
});
React.render(<MySelect />, document.body); 

var MySelect = React.createClass({
getInitialState: function() {
 

var MySelect = React.createClass({
 getInitialState: function() {
     return {
         value: 'select'
     }
 },
 change: function(event){
     event.persist(); //THE MAIN LINE THAT WILL SET THE VALUE
     this.setState({value: event.target.value});
 },
 render: function(){
    return(
       <div>
           <select id="lang" onChange={this.change.bind(this)} value={this.state.value}>
              <option value="select">Select</option>
              <option value="Java">Java</option>
              <option value="C++">C++</option>
           </select>
           <p></p>
           <p>{this.state.value}</p>
       </div>
    );
 }
});
React.render(<MySelect />, document.body); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

언급URL : https://stackoverflow.com/questions/28868071/onchange-event-using-react-js-for-drop-down