通過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獲取輸入文本的值

回答

相關問題