所以我正在尝试在reactjs中获取一个
很简单:
在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)
}
我看到你正在使用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/
_handleDube
处理程序的设置位置。 - julengetDOMNode()
应该像这样读取:React.findDOMNode(this.refs.message).value
。 - julenthis.refs.message.value
似乎读取了该值。 - samu创建一个handleChange()函数。然后在render()中像这样使用:
<Input type="select" value="1" ref="valid_for" onChange={this.handleChange}>
组件中的函数:
handleChange: function(e) {
var val = e.target.value;
},
"react": "^15.0.2",
"react-bootstrap": "^0.29.3",
"react-dom": "^15.0.2",
<FormControl name="username" ref="username"/>
在handler()函数中:
const username = findDOMNode(this.refs.username);
以上方法都对我无效。实际上,我必须通过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",
将引用作为字符串被视为过时并可能会被弃用。但是似乎 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" />
// ...
}
}
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" />
// ...
}
}
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>
}
}
react-bootstrap
文档是您最好的朋友,因为即使在 SO 上接受的答案也会过时。 - 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;
const changeLanguage = (event: any)=> {
console.log('Selected Index : ', event.target.selectedIndex);
}
<Form.Control as="select" onChange={(event)=>{changeLanguage(event)}}>
<option>English</option>
<option>Marathi</option>
</Form.Control>
注意:此解决方案适用于函数组件。对于类组件,我们需要相应地更改语法。
:
考虑到目前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>
</>
)
}
ref="selectElement"
。 - julengetInputDOMNode().value
而不是getDOMNode().value
。 - Chris Houghton