37

所以我试图select在 reactjs 中获取元素的值,但就是想不通。this.refs.selectElement.getDOMNode().value总是来的undefined。表单上的所有其他控件text都可以正常工作。有任何想法吗?是不是不能通过事件获取select元素的值refs而必须使用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>标签中。这解决了我的问题,感谢所有帮助。

4

9 回答 9

51

这很简单:

在渲染方法上,你应该留意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)
}
于 2016-02-18T20:51:03.100 回答
31

我看到您正在使用react-bootstrap,它包括一个围绕常规输入元素的包装器。

在这种情况下,您需要使用getInputDOMNode()wrapper 函数来获取底层输入的实际 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/

于 2015-02-23T20:06:38.007 回答
16

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

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

以及组件中的功能:

handleChange: function(e) {
  var val = e.target.value;
},
于 2015-02-24T03:02:57.140 回答
6
"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);
于 2016-05-05T11:15:48.483 回答
4

以上都不适合我。实际上,我必须通过 DOM 层次结构来提出一种提取值的方法。PS:我没有ReactBootstrap.ListGroup我的代码中使用。只是Input来自 React Bootstrap。这是我的代码(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",
于 2016-01-23T16:05:45.053 回答
1

如果您像我一样在这里使用最新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>
    }
}
于 2017-01-26T09:16:48.573 回答
1

作为字符串的 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" />
    // ...
  }
}
于 2016-06-07T01:36:02.173 回答
0
  1. 事件处理程序应如下所示:
const changeLanguage = (event: any)=> {
  console.log('Selected Index : ', event.target.selectedIndex);
}
  1. JSX 应该包含以下内容:
<Form.Control as="select" onChange={(event)=>{changeLanguage(event)}}>                
  <option>English</option>
  <option>Marathi</option>
</Form.Control>

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

于 2021-06-28T05:57:53.907 回答
0

There is yet another easy way! if you use <FormGroup> component and set the controlId props, the inner DOM (<input>, ...) will get that controlId as its id attribute. for example:

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

Then you will have the value by calling document.getElementById:

var myInputValue = document.getElementById("myInputID").value;
于 2016-06-12T04:04:15.590 回答