使用 react-bootstrap 获取输入文本的值 [英] Get value of input text with react-bootstrap
本文介绍了使用 react-bootstrap 获取输入文本的值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试在输入文本中获取值,并使用 react-bootstrap 将其添加到文本区域.
I try to get value into a input text and add it to a text area with react-bootstrap.
我知道我必须使用 ReactDOM.findDOMNode 来获取带有 ref 的值.我不明白出了什么问题.
I know I must use ReactDOM.findDOMNode to get value with ref. I don't understand what is wrong.
这是我的代码:
import React from 'react';
import logo from './logo.svg';
import ReactDOM from 'react-dom';
import { InputGroup, FormGroup, FormControl, Button} from 'react-bootstrap';
import './App.css';
class InputMessages extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.GetMessage= this.GetMessage.bind(this);
this.state = {message: ''};
}
handleChange(event)
{
this.setState({message: this.GetMessage.value});
}
GetMessage()
{
return ReactDOM.findDOMNode(this.refs.message );
}
render() {
var message = this.state.message;
return(
<FormGroup >
<FormControl
componentClass="textarea" value={message} />
<InputGroup>
<FormControl type="text" ref='message' />
<InputGroup.Button>
<Button bsStyle="primary" onClick={this.handleChange}>Send
</Button>
</InputGroup.Button>
</InputGroup>
</FormGroup>
);
}
}
export default InputMessages;
推荐答案
向表单添加输入引用:
<FormControl inputRef={ref => { this.myInput = ref; }} />
所以现在你得到了这样的价值
so now you get the value like
this.myInput.value
这篇关于使用 react-bootstrap 获取输入文本的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文