web-dev-qa-db-ja.com

react-bootstrapでselect要素の値を取得する方法は？

だから私はreactjsでselect要素の値を取得しようとしていますが、それを理解することはできません。 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。それから取り出すか、<form>タグ内のすべてのInput要素をラップします。これで私の問題は解決しました。すべての助けに感謝します。

javascriptreactjsreact-bootstrap
33
Raza Gill

react-bootstrap を使用しているようです。通常の入力要素のラッパーが含まれています。

この場合、基礎となる入力の実際のDOM要素を取得するには、 getInputDOMNode() ラッパー関数を使用する必要があります。ただし、 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/

31
julen

それは非常に簡単です：

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)
}
44
Alejandro Silva

関数handleChange（）を作成します。次に、次のようにrender（）に入れます。

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

そして、コンポーネント内の関数：

handleChange: function(e) {
  var val = e.target.value;
},
13
ritmatter
"react": "^15.0.2",
"react-bootstrap": "^0.29.3",
"react-dom": "^15.0.2",

envの下で、ReactDOM.findDOMNode（）が機能します。

render（）で：

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

handler（）内：

const username = findDOMNode(this.refs.username);
6
Fizzy Chan

上記のどれも私にとってはうまくいきませんでした。実際には、値を抽出する方法を考え出すためにDOM階層を通過する必要がありました。 PS：やったnot use 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",
3
AndyFaizan

文字列としての参照は レガシーと見なされ、廃止される可能性があります です。しかし、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 way」または非常に最新のものではありませんが、機能します。

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

あなたが私のような最新の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>
    }
}
0
JohnnyQ

さらに別の簡単な方法があります！ <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;
0
Majid