如何在 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> ) } });

更新：解决方案因此，如果有人遇到类似的情况，显然如果您使用的是 react-bootstrap，则如果将Input元素包装在ListGroup中，则无法访问该元素。 要么将其从中取出，要么将所有Input元素包装在<form>标记中。 这解决了我的问题，感谢所有帮助。

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)
}

Answer 2

我看到您正在使用react-bootstrap ，其中包含一个围绕常规输入元素的包装器。

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

所以你的_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 3

制作一个函数handleChange()。 然后，像这样把它放在你的 render() 中：

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

以及组件中的函数：

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

Answer 4

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

在环境下， ReactDOM.findDOMNode() 对我有用。

在渲染（）中：

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

在处理程序（）中：

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

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",

Answer 6

作为字符串的 Refs 被认为是遗留的，可能会被弃用。 但似乎 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" />
    // ...
  }
}

我最终抓住了 change 事件并从中获取了价值。 这感觉不像“反应方式”或非常流行，但它有效。

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

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

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;

Answer 9

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

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

2. JSX 应包含以下内容：

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

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

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>
        </>
    )
}