通过react-bootstrap获取输入文本的值

我尝试通过react-bootstrap将值输入到输入文本并将其添加到文本区域。通过react-bootstrap获取输入文本的值

我知道我必须使用ReactDOM.findDOMNode才能获得参考值。我不明白什么是错的。

这里我的代码：

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;

来源

2017-07-19 Vana

价值寻求帮助时，取可以合理地设置代码的格式，并且一致性可能有助于您获得更好/更快的答案。此外，请考虑使用Stack Snippets（'[<>]'工具栏按钮）使用** runnable ** [mcve]更新您的问题。 Stack Snippets支持React，包括JSX; [这是如何做一个]（http://meta.stackoverflow.com/questions/338537/）。 –

添加输入裁判的形式：

<FormControl inputRef={ref => { this.myInput = ref; }} />

所以现在你得到

this.myInput.value

来源

2017-07-19 15:27:05 Fawaz

输入不在react-bootstrap上，我不想用它 – Vana

@Vana我编辑了答案。 – Fawaz

它的工作原理，但我存储的状态值。我想将它存储到变量中。我使用2个组件，所以我不能将this.myinput.value写入其他组件 – Vana

通过react-bootstrap获取输入文本的值

回答

相关问题