How to take something from an input text and pass by reference?

Question

How do I pick up something that I typed in an input text, and when I press a "Send" button, I send that text somewhere in my code, like how we use 'this.state.algumaCoisa'... Follow the code:

render(){
    return(
      <div className="container">
      <div className="box box-primary direct-chat direct-chat-primary ">
  <Chat />
      <div nameClass="direct-chat-msg right">
          <div className="direct-chat-info clearfix">
              <span className="direct-chat-name pull-right">TEXTO AQUI</span>
              <span className="direct-chat-timestamp pull-right">TEXTO AQUI</span>
          </div>
              <img className="direct-chat-img-right" alt="message user image"/>
      </div>

        <div className="box-footer">
         <div className="input-group">
                    <input
                    ref="topic"
                    type="text"
                    name="message"
                    placeholder="Type your message here..."
                    className="form-control"/>
<span className="input-group-btn">                     
            <button type="button" className="btn btn-flat btn-primary">Send</button>
            </span>
       </div>
     </div>
     </div>
     </div>

    );
  }

Answer 1

You can do this in different ways. One of them is keeping the input value by listening to events input, and there the value is already in the state waiting to be used:

const Chat = () => null;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      texto: ''
    }
  }

  onSend() {
    console.log(this.state.texto);
  }

  render() {
    return (
      <div className="container">
        <div className="box box-primary direct-chat direct-chat-primary ">
          <Chat />
          <div nameClass="direct-chat-msg right">
            <div className="direct-chat-info clearfix">
              <span className="direct-chat-name pull-right">TEXTO AQUI</span>
              <span className="direct-chat-timestamp pull-right">TEXTO AQUI</span>
            </div>
            <img className="direct-chat-img-right" alt="message user image" />
          </div>

          <div className="box-footer">
            <div className="input-group">
              <input onInput={(e) => this.setState({texto: e.target.value})} type="text" name="message" placeholder="Type your message here..." className="form-control"/>
              <span className="input-group-btn">                     
                  <button type="button" onClick={this.onSend.bind(this)} className="btn btn-flat btn-primary">Send</button>
                  </span>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render( <
  App / > ,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

Another way is to use ref as you had. In that case says the documentation that you should use ref asynchronously. It would look like this:

const Chat = () => null;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    }
  }

  onSend() {
    const value = this.textInput.value;
    console.log(value);
  }

  render() {
    return (
      <div className="container">
        <div className="box box-primary direct-chat direct-chat-primary ">
          <Chat />
          <div nameClass="direct-chat-msg right">
            <div className="direct-chat-info clearfix">
              <span className="direct-chat-name pull-right">TEXTO AQUI</span>
              <span className="direct-chat-timestamp pull-right">TEXTO AQUI</span>
            </div>
            <img className="direct-chat-img-right" alt="message user image" />
          </div>

          <div className="box-footer">
            <div className="input-group">
              <input ref={input => this.textInput = input} type="text" name="message" placeholder="Type your message here..." className="form-control"/>
              <span className="input-group-btn">                     
                  <button type="button" onClick={this.onSend.bind(this)} className="btn btn-flat btn-primary">Send</button>
                  </span>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render( <
  App / > ,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>