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

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 Fiddle 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>