[英]Get value of input text with react-bootstrap
I try to get value into a input text and add it to a text area with react-bootstrap. 我尝试将值转换为输入文本,然后使用react-bootstrap将其添加到文本区域。
I know I must use ReactDOM.findDOMNode to get value with ref. 我知道我必须使用ReactDOM.findDOMNode来获得ref的价值。 I don't understand what is wrong. 我不明白怎么了。
Here my code : 这是我的代码:
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;
Form Control has a ref
prop , which allows us to use React Refs Form Control有一个ref
prop ,它使我们可以使用React Refs
Sample Code : 样例代码:
class MyComponent extends React.Component {
constructor() {
/* 1. Initialize Ref */
this.textInput = React.createRef();
}
handleChange() {
/* 3. Get Ref Value here (or anywhere in the code!) */
const value = this.textInput.current.value;
}
render() {
/* 2. Attach Ref to FormControl component */
return (
<div>
<FormControl ref={this.textInput} type="text" onChange={() => this.handleChange()} />
</div>
)
}
}
Hope this helps! 希望这可以帮助!
Add an Input ref to your form : 在表单中添加输入参考:
<FormControl inputRef={ref => { this.myInput = ref; }} />
so now you get the value like 所以现在你得到像
this.myInput.value
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.