제출시 선택 옵션 값 가져 오기

Question

반응에서 제출 버튼을 클릭 할 때 선택 옵션에 대한 vaule을 얻는 가장 좋은 방법은 무엇입니까?

선택 옵션에도 onChange를 추가해야합니까?

var UIPrintChart = React.createClass({ 
    getInitialState: function() { 
     return { 
      value: 'PNG' 
     } 
    }, 
    handlePrint(event) { 
     if (this.state.value == 'PNG') { 
      console.log('Hello PNG'); 
     } 
     if (this.state.value == 'JPEG') { 
      console.log('Hello JPEG'); 
     } 
     if (this.state.value == 'PDF') { 
      console.log('Hello PDF'); 
     } 
     if (this.state.value == 'SVG') { 
      console.log('Hello SVG'); 
     } 
    }, 
    render() { 
     return (
      <div> 
       <select> 
        <option value="PNG">PNG Image</option> 
        <option value="JPEG">JPEG Image</option> 
        <option value="PDF">PDF Document</option> 
        <option value="SVG">SVG Vector Image</option> 
       </select> 
       <button className="uk-button uk-button-mini" onClick={this.handlePrint}>Export Chart</button> 
      </div> 
      ) 
    } 
}); 

Answer 1

그래, 당신은 select 요소에 대한 onChange 처리기를 추가해야합니다. 레오가 답을 주었지만 이벤트가 발생할 때마다 최적의 콜백이 생성되지 않을 수도 있습니다. 규모에서는 앱이이 수준의 최적화를 필요로하지 않을 수도 있습니다. 나는 또한 당신의 handlePrint 기능을 단순화

import React from 'react'; 

class UIPrintChart extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     value: 'PNG' 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    this.handlePrint = this.handlePrint.bind(this); 
    } 

    handlePrint() { 
    if (this.state.value) { 
     console.log(this.state.value); 
    } 
    } 

    handleChange(e) { 
    this.setState({ value: e.target.value }); 
    } 

    render() { 
    return (
     <div> 
     <select onChange={this.handleChange}> 
      <option value="PNG">PNG Image</option> 
      <option value="JPEG">JPEG Image</option> 
      <option value="PDF">PDF Document</option> 
      <option value="SVG">SVG Vector Image</option> 
     </select> 
     <button className="uk-button uk-button-mini" onClick={this.handlePrint}>Export Chart</button> 
     </div 
    ); 
    } 
} 

export default UIPrintChart; 

,하지만 당신이 그러나 당신이 희망이 도움이 :) 좋아 구현할 수 : 어쨌든, 나는 아마 React.Component 클래스에서 확장하는 일을 다시 것입니다!

Answer 2

나뿐만 아니라 선택 옵션에의 onChange를 추가해야겠습니까? 이 같은 예

는 :

<select onChange={(e) => this.setState({ value: e.target.value })}> 
    <option value="PNG">PNG Image</option> 
    <option value="JPEG">JPEG Image</option> 
    <option value="PDF">PDF Document</option> 
    <option value="SVG">SVG Vector Image</option> 
</select>