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>

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

1 个答案: