Как правильно взять value от input-а и передать в React

class App extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
       value: '', 
       valueOld: '', 
       changed: false, 
       length: 0 
    } 
  } 
   
  input1Change = (e) => { 
    let next = this.state; 
    next.value = e.target.value; 
    next.changed = next.value !== next.valueOld; 
    next.length = e.target.value.length; 
    this.setState(next); 
  } 
   
  button1Click = () => { 
    alert(`Кнопка1: Введен текст ${this.state.value}`); 
  } 
   
  button2Click = () => { 
    let text = this.input2.value; 
    if(text && text.length > 0) { 
      alert(`Кнопка2: Введен текст ${text}`); 
    } else { 
      alert(`Кнопка2: Ничего не введено`); 
    } 
  } 
   
  render() { 
    return ( 
      <div> 
        <div className="panel panel-default"> 
          <div className="panel-heading">Пример со state</div> 
            <div className="panel-body"> 
              <div className="col-sm-12"> 
                <div className="input-group"> 
                  <input  
                    type="text"  
                    className="form-control"  
                    placeholder="..." 
                    ref={ref => this.input1 = ref} 
                    onChange={this.input1Change} 
                    value={this.state.value} 
                  /> 
                  <span className="input-group-btn"> 
                    <button  
                      className="btn btn-primary"  
                      type="button" 
                      onClick={this.button1Click} 
                      disabled={!this.state.changed} 
                    >Go!</button> 
                  </span> 
                </div> 
                {this.state.changed && 
                  <p className="text-success"> 
                    Текст изменен, введено {this.state.length} символов 
                  </p> 
                } 
             </div> 
          </div> 
        </div> 
        <div className="panel panel-default"> 
          <div className="panel-heading">Пример без state</div> 
            <div className="panel-body"> 
              <div className="col-sm-12"> 
                <div className="input-group"> 
                  <input  
                    type="text"  
                    className="form-control"  
                    placeholder="..." 
                    ref={ref => this.input2 = ref} 
                  /> 
                  <span className="input-group-btn"> 
                    <button  
                      className="btn btn-primary"  
                      type="button" 
                      onClick={this.button2Click} 
                    >Go!</button> 
                  </span> 
                </div> 
             </div> 
          </div> 
        </div> 
      </div> 
    ); 
  } 
} 
 
ReactDOM.render(<App />, document.getElementById('root'));

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<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="root" class="container"></div>