如何在react-bootstrap中获取选择元素的值？

Question

所以我正在尝试在reactjs中获取一个元素的值，但是就是无法弄清楚。使用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> ) } }); 更新：解决方案如果有人遇到类似问题，显然，如果您正在使用react-bootstrap并且将 Input 元素包装在 ListGroup 中，则无法访问它。要么将其从其中删除，要么将所有 Input 元素包装在<form>标记中。这解决了我的问题，感谢所有的帮助。

- Raza

---

你能发布你的代码吗？ - sma

我已经使用代码更新了它。 - Raza

您没有设置 ref="selectElement"。 - julen

你为什么使用“Input”而不是“select”？ - mlienau

请使用 getInputDOMNode().value 而不是 getDOMNode().value。 - Chris Houghton

Answer 1

很简单:

在render方法中，您应该注意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)
}

- Alejandro Silva

---

谢谢，帮了我很多！ :) - Vetterjack

这是最佳的做法。 - eden

出于性能考虑，最好在组件的构造函数中绑定回调，而不是像这样内联定义。根据文档。 - Madbreaks

Answer 2

我看到你正在使用react-bootstrap，它包含了一些常规输入元素的封装。

在这种情况下，您需要使用getInputDOMNode()来获取底层输入的实际 DOM 元素。但您也可以使用getValue()方便函数，该函数是由react-bootstrap提供给输入元素的。

所以您的_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/

- julen

---

不起作用。getInputDOMNode() 函数未定义。 - Raza

你说得对，它确实有效。但是出于某种原因，在我的应用程序中它不起作用，尽管如此我会接受这个答案，谢谢。 - Raza

如果您发布所有相关代码，我们可以为您提供帮助 - 您会发现在您张贴的代码中，没有线索表明 _handleDube 处理程序的设置位置。 - julen

React中的API已更改，现在getDOMNode()应该像这样读取：React.findDOMNode(this.refs.message).value。 - julen

在React 15.2.1中，this.refs.message.value似乎读取了该值。 - samu

Answer 3

创建一个handleChange()函数。然后在render()中像这样使用：

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

组件中的函数：

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

- ritmatter

---

现在我正在这样做，但问题是我们是否不能完全使用引用来处理选择元素？ - Raza

Answer 4

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

在环境下，ReactDOM.findDOMNode() 对我有效。在 render() 中：

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

在handler()函数中：

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

- Fizzy Chan

Answer 5

以上方法都对我无效。实际上，我必须通过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",

- AndyFaizan

Answer 6

将引用作为字符串被视为过时并可能会被弃用。但是似乎 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" />
    // ...
  }
}

我最终选择了获取变化事件并从中获取值。这种方式不太符合"React风格"或现在的潮流，但它能实现。

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" />
    // ...
  }
}

- mccambridge

Answer 7

如果您像我一样在使用最新的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>
    }
}

- JohnnyQ

---

我能知道为什么这个答案最初被投下反对票吗？我是React的新手，我想知道这是否是正确的实现。 - Niveditha Karmegam

@NivedithaKarmegam 我在 SO 上加入以来一直遇到同样的问题，人们不给出回答就进行负面评价真的是一个问题。关于你的问题是否是适当的实现，这取决于，在撰写本答案时它可以工作，但我不确定最近是否有更新。所以我的个人哲学是，如果它能够工作并且您不需要费心更新库并且想要提高生产力，那么这种方法适合您。否则，react-bootstrap 文档是您最好的朋友，因为即使在 SO 上接受的答案也会过时。 - JohnnyQ

Answer 8

还有一种简单的方法！如果你使用<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;

- Majid

Answer 9

1. 事件处理程序应该如下所示：

const changeLanguage = (event: any)=> {
  console.log('Selected Index : ', event.target.selectedIndex);
}

JSX应包含以下内容：

<Form.Control as="select" onChange={(event)=>{changeLanguage(event)}}>                
  <option>English</option>
  <option>Marathi</option>
</Form.Control>

注意：此解决方案适用于函数组件。对于类组件，我们需要相应地更改语法。

- Yuvraj Patil

Answer 10

:

考虑到目前getDOMNode()和findDOMNode()的使用已经过时，

import * as React from 'react'
import Form from 'react-bootstrap/Form'

和&

const Componente1 = (props) => {
    let clave = document.getElementById('formSignupPassword').value
    console.log(clave)
    return (
        <>
            <Form>
                <Form.Group className="mb-2" controlId="formSignupPassword">
                    <Form.Label className="mb-0">Contraseña</Form.Label>
                    <Form.Control
                        type="password"
                        placeholder="Registre una clave"
                    />
                </Form.Group>
            </Form>
        </>
    )
}

. & .

const Componente2 = (props) => {
    let passwordText = React.createRef()
    let clave = passwordText.current.value
    console.log(clave)
    return (
        <>
            <Form>
                <Form.Group className="mb-2" controlId="formSignupPassword">
                    <Form.Label className="mb-0">Contraseña</Form.Label>
                    <Form.Control
                        type="password"
                        placeholder="Registre una clave"
                        inputRef={passwordText}
                        // or Use
                        ref={passwordText}
                    />
                </Form.Group>
            </Form>
        </>
    )
}

. ={() =>} & .

const Componente3 = (props) => {
    const [userEmail, setEmail] = React.useState(null)
    console.log(userEmail)
    return (
        <>
            <Form>
                <Form.Group className="mb-2" controlId="formSignupEmail">
                    <Form.Label className="mb-0">Email</Form.Label>
                    <Form.Control
                        type="email"
                        placeholder="Registre una cuenta de email valida"
                        onChange={(e) => setEmail(e.target.value)}
                    />
                </Form.Group>
            </Form>
        </>
    )
}

- Maik col