如何在react-bootstrap中獲取select元素的值？

Question

所以我試圖在reactjs中獲得一個select元素的值，但只是無法弄清楚。 this.refs.selectElement.getDOMNode().value始終爲undefined。表格上的所有其他控件（如text）都正常工作。有任何想法嗎？是否通過refs獲得select元素的值並且必須使用onChange事件？

更新時間：

var TestSelectClass = React.createClass({ 
 
    mixins: [Router.Navigation], 
 

 
    _handleDube: function(event) { 
 
    DubeActionCreators.DubeTest({ 
 
     message: this.refs.message.getDOMNode().value, 
 
     tax: this.refs.tax.getDOMNode().value, 
 
     validity: this.refs.valid_for.getDOMNode().value 
 
    }); 
 
    }, 
 

 
    render: function() { 
 
    return (
 
     <ReactBootstrap.ListGroup> 
 
      <textarea 
 
      className="form-control" 
 
      rows="3" 
 
      placeholder="Enter message" 
 
      ref="message" > 
 
      </textarea> 
 
      <div className="input-group"> 
 
      <span className="input-group-addon" id="basic-addon1">$</span> 
 
      <input type="text" className="form-control" placeholder="10" aria-describedby="basic-addon1" ref="tax" /> 
 
      </div> 
 
     <Input type="select" value="1" ref="valid_for"> 
 
      <option value="1">1 hour</option> 
 
      <option value="2">1 day</option> 
 
      <option value="2">5 days</option> 
 
     </Input> 
 
     </ReactBootstrap.ListGroup> 
 
    ) 
 
    } 
 
});

更新：解決方案 所以，如果有人跑進類似的東西，顯然，如果你正在使用的反應，引導你不能給Input元素（如果已將其包裝在ListGroup中）。將其從中取出或將所有Input元素包裝在<form>標記中。這解決了我的問題，感謝所有的幫助。

Answer 1

我看你使用的是react-bootstrap，它包括一個圍繞常規輸入元素的包裝。

在這種情況下，您需要使用getInputDOMNode()包裝函數來獲取底層輸入的實際DOM元素。但你也可以使用getValue()便利功能react-bootstrap provides for Input elements。

所以你_handleDube功能應該是這樣的：

_handleDube: function(event) { 
    DubeActionCreators.DubeTest({ 
     message: this.refs.message.getInputDOMNode().value, 
     tax: this.refs.tax.getInputDOMNode().value, 
     validity: this.refs.valid_for.getValue() 
    }); 
    }, 

一個完整的例子來看看這個的jsfiddle：http://jsfiddle.net/mnhm5j3g/1/

Answer 2

做一個函數handleChange（）。然後，把它放在你的渲染（）這樣的：

<Input type="select" value="1" ref="valid_for" onChange={this.handleChange}> 

而在組件的功能：

handleChange: function(e) { 
    var val = e.target.value; 
}, 

Answer 3

以上都不爲我工作。實際上我不得不通過DOM層次結構來想出提取價值的方法。 PS：我沒有不是在我的代碼中使用ReactBootstrap.ListGroup。來自React Bootstrap的Input。這是我的代碼（ES6 +）。

import ReactDOM from 'react-dom'; 

getValueFromSelect(ref){ 
    var divDOMNode = ReactDOM.findDOMNode(ref); 
    /* the children in my case were a label and the select itself. 
     lastChild would point to the select child node*/ 
    var selectNode = divDOMNode.lastChild; 
    return selectNode.options[selectNode.selectedIndex].text; 
} 

依賴關係：

"react": "^0.14.3", 
    "react-bootstrap": "0.28.1", 
    "react-dom": "^0.14.3", 

Answer 4

這是相當簡單：

的渲染方法，你應該保持對bind(this)

<select onChange={this.yourChangeHandler.bind(this)}> 
    <option value="-1" disabled>--</option> 
    <option value="1">one</option> 
    <option value="2">two</option> 
    <option value="3">three</option> 
</select> 

的眼睛和你的處理程序是這樣的：

yourChangeHandler(event){ 
    alert(event.target.value) 
} 

Answer 5

"react": "^15.0.2", 
"react-bootstrap": "^0.29.3", 
"react-dom": "^15.0.2", 

在env下，ReactDOM.findDOMNode（）適用於我。在

渲染（）：

<FormControl name="username" ref="username"/> 

在處理程序

（）：

const username = findDOMNode(this.refs.username); 

Answer 6

參考文獻

作爲字符串是considered legacy and may be deprecated。但看起來好像react-bootstrap組件不適用於回調引用。我今天正在處理這個問題以處理搜索輸入。

class SearchBox extends Component { 
    constructor(props, context) { 
    super(props, context); 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange() { 
    this.props.updateQuery(this._query.value); 
    } 

    render() { 
    // ... 
    <FormControl 
     onChange={this.handleChange} 
     ref={(c) => this._query = c} // should work but doesn't 
     value={this.props.query} 
     type="text" 
     placeholder="Search" /> 
    // ... 
    } 
} 

我結束了抓住變化事件並從中獲取價值。這不會感覺到「反應方式」或非常流行，但它的工作原理。

class SearchBox extends Component { 
    constructor(props, context) { 
    super(props, context); 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e) { 
    this.props.updateQuery(e.target.value); 
    } 

    render() { 
    // ... 
    <FormControl 
     onChange={this.handleChange} 
     value={this.props.query} 
     type="text" 
     placeholder="Search" /> 
    // ... 
    } 
} 

Answer 7

還有另一種簡單的方法！如果您使用<FormGroup>組件並設置了controlId道具，則內部DOM（<input>，...）將獲得controlId作爲其id屬性。例如：

<FormGroup controlId="myInputID"> 
    <ControlLabel>Text</ControlLabel> 
    <FormControl type="text" placeholder="Enter text" /> 
</FormGroup> 

然後你會被調用document.getElementById有值：

var myInputValue = document.getElementById("myInputID").value; 

Answer 8

如果你在這裏我在這裏使用了最新FormControl組件就像是一個解決方案，我所做的：

import React, {Component} from 'react' 
import ReactDOM from 'react-dom' 

class Blah extends Component { 
    getSelectValue =() => { 
     /* Here's the key solution */ 
     console.log(ReactDOM.findDOMNode(this.select).value) 
    } 

    render() { 
     return 
     <div> 
      <FormControl 
      ref={select => { this.select = select }} 
      componentClass="select" 
      disabled={this.state.added} 
      > 
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
      </FormControl> 
      <Button onclick={this.getSelectValue}> 
       Get Select value 
      </Button> 
     </div> 
    } 
}