Получить значение опции выбора при отправке с помощью React

Question

Каков наилучший способ получить ваулу опции выбора при нажатии кнопки отправки в ответ?

Должен ли я добавить 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

Да, вы должны добавить onChange обработчик для select элемента. Лео дал вам ответ, но, вероятно, не оптимален, так как каждый раз, когда происходит событие, создается новый обратный вызов. Хотя в масштабе ваше приложение, вероятно, не требует такого уровня оптимизации. Во всяком случае, я бы, вероятно, переписать вещи, чтобы простираться от класса React.Component:

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; 

Я также упростили вашу handlePrint функцию, но вы можете реализовать это, как вам нравится :) Надеюсь, что это помогает!

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>