Получить значение входного текста с помощью 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;

reactjs javascript react-bootstrap textarea textinput
person Vana    schedule 19.07.2017    source источник
comment
Когда вы обращаетесь за помощью, потратьте время на разумное форматирование кода и согласованность, что, вероятно, поможет вам получить более качественные/быстрые ответы. Кроме того, рассмотрите возможность добавления в свой вопрос пригодного для выполнения минимально воспроизводимого примера с использованием фрагментов стека (фрагменты [<>] кнопка панели инструментов). Фрагменты стека поддерживают React, включая JSX; вот как это сделать.   -  person T.J. Crowder    schedule 19.07.2017

Ответы (2)


arrow_upward
3
arrow_downward

Добавьте входную ссылку в форму:

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

так что теперь вы получаете значение как

this.myInput.value
person Fawaz    schedule 19.07.2017
comment
Это работает, но я храню значения в состоянии. Я хотел бы сохранить его в переменной. Я использую 2 компонента, поэтому не могу записать this.myinput.value в другой компонент. - person Vana; 21.07.2017
comment
‹FormControl › componentClass=textarea value={this.input.value} /› не распознает ссылку, тогда как функция - person Vana; 21.07.2017

arrow_upward
6
arrow_downward

Form Control имеет ref prop, который позволяет нам использовать React Refs

Образец кода :

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

Надеюсь это поможет!

person naribo    schedule 21.03.2019
comment
Очень полезно! Спасибо!! - person Sara Inés Calderón; 03.07.2019