How do I get something from an input text and pass by reference?

Question

How do I get something from an input text and pass by reference?

Navigation

#1 by (0 votes)

2

How do I get something typed in an input text, and when I press a "Send" button, I send that text somewhere in my code, like we use 'this.state.algumaCoise' ... 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>

    );
  }

javascript react

asked by anonymous 06.11.2017 / 20:44

1 answer

Doubt about the error "Strict standards: Only variables should be passed by reference in" Google line charts does not appear the line

score 0 · Accepted Answer

You can do this in different ways. One of them is to save the input value by listening for events input , and then the value is already in 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><scriptsrc="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 this case it tells 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><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

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