如何设置输入默认值与状态，还手动更新输入？

Question

React非常新，我有一个输入，我希望设置状态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

您可以onChange事件添加到您的输入，以改变quantity手动

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>