37

だから私はselectreactjsで要素の値を取得しようとしていますが、それを理解することはできません. は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

それは非常に簡単です：

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)
}
于 2016-02-18T20:51:03.100 に答える
31

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

この場合getInputDOMNode()、基になる入力の実際の DOM 要素を取得するためにラッパー関数を使用する必要があります。ただし、 react-bootstrap が提供する Input elementsgetValue()の便利な関数を使用することもできます。

したがって、_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",

環境の下では、 ReactDOM.findDOMNode() が機能します。

render() で:

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

ハンドラ（）で：

const username = findDOMNode(this.refs.username);
于 2016-05-05T11:15:48.483 に答える
1

文字列としての参照はレガシーと見なされ、廃止される可能性があります。しかし、react-bootstrap コンポーネントはコールバック ref では機能しないようです。今日、検索入力を処理するためにこれに取り組んでいました。

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" />
    // ...
  }
}
于 2016-06-07T01:36:02.173 に答える
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 に答える