状態で入力デフォルト値を設定し、手動で入力を更新する方法は？

Question

非常に新しい、私は状態quantityで設定したいと思う入力を持っていますが、ボタンをクリックすると量が更新されますが、入力値を手動で更新することもできます。これを達成するには？

JS

const Input = React.createClass({ 
    getInitialState() { 
     return { 
      quantity: 0 
     } 
    }, 

    updateQuantity() { 
      this.setState({ 
      quantity: this.state.quantity + 1 
     }); 
    }, 

    render() { 
     return (
      <div> 
       <input type="text" value={this.state.quantity}/> 
       <button onClick={this.updateQuantity}>Update</button> 
      </div> 
     ) 
    } 
}); 

JSフィドルhttp://jsfiddle.net/mwvjLqkg/

Answer 1

は手動

const Input = React.createClass({ 
 
    getInitialState() { 
 
    return { 
 
     quantity: 0 
 
    } 
 
    }, 
 

 
    updateQuantity() { 
 
    this.setState({ 
 
     quantity: this.state.quantity + 1 
 
    }); 
 
    }, 
 

 
    handleChange(e) { 
 
    this.setState({ quantity: +e.target.value }) 
 
    }, 
 

 
    render() { 
 
    return <div> 
 
     <input 
 
     type="text" 
 
     value={this.state.quantity} 
 
     onChange={ this.handleChange } 
 
     /> 
 
     
 
     <button onClick={this.updateQuantity}>Update</button> 
 
    </div> 
 
    } 
 
}); 
 

 
ReactDOM.render(<Input />, document.body.querySelector('.js-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 class="js-app"></div>

を変更するために、あなたの入力に onChangeイベントを追加することができます