在ReactJS

Question

與「選擇」選項處理我有以下代碼：

<select id="creditCard" ref="card"> 
{this.state.cards.map(function(card){ 
     return(
      <option value={card.ListId}>{card.FullName}</option> 
     ) 
     }, this)} 
    </select> 

我試圖找出如何從功能的onClick但沒有我嘗試似乎工作搶選定值。任何我想念的想法？

當前我在嘗試this.refs.card.getDOMNode().value但它只給我的文字不是選定的選項值。

Answer 1

您可以使用refs（documentation）和React.findDOMNode如下所示訪問value如圖here：

var Example = React.createClass({ 
    render: function() { 
     return (
     <div> 
      <select ref="peopleList"> 
      {this.props.people.map(function(person){ 
       return(<option value={person.id}>{person.name}</option>) 
     }, this)}      
      </select>   
      <button onClick={ this.handleClick }>Selected?</button> 
     </div> 
    ); 
    }, 
    handleClick: function() { 
     alert(React.findDOMNode(this.refs.peopleList).value);  
    } 
}); 

var people = [ 
{ 
    name: 'john', 
    id: 1  
}, 
{ 
    name: 'irma', 
    id: 2  
}, 
{ 
    name: 'rita', 
    id: 3 
} 
]; 

React.render(<Example people={ people }/>, document.getElementById('container')); 

Answer 2

一種選擇是使用onChange在<select>抓住當前值，做任何你需要用它做：

handleChange: function(e) { 
    var selectedValue = e.target.value 
    // ... 
}, 

// ...in render() 
<select id="creditCard" onChange={this.handleChange}>