使用 react-bootstrap 获取输入文本的值-解网

问：

我尝试将值放入输入文本中，并使用 react-bootstrap 将其添加到文本区域。

我知道我必须使用 ReactDOM.findDOMNode 来获取带有 ref 的值。我不明白出了什么问题。

这是我的代码：

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;

javascript reactjs textarea react-bootstrap textinput

在寻求帮助时，花时间合理地格式化你的代码和一致性可能会帮助你获得更好/更快的答案。此外，请考虑使用堆栈片段（工具栏按钮）使用可运行的最小可重现示例来更新您的问题。Stack Snippets 支持 React，包括 JSX;这是如何做的。[<>]

答：

3赞 Fawaz 7/19/2017 #1

将输入引用添加到表单中：

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

所以现在你得到的值是这样的

this.myInput.value

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>
    )
  }
}

希望这有帮助！

使用 react-bootstrap 获取输入文本的值

Get value of input text with react-bootstrap

评论

评论

评论