javascript - 多个事件创建动态+/-可编辑输入

Question

我想创建自己的input[type="number"]。我尝试创建一个输入按钮:

1. 必须允许用户输入 1 到 10 之间的值，如果不是这种情况，则只能输入限制值(1 或 10)。

2. 必须能够增加或减少使用 + 和 - 按钮输入的数字。

CODEPEN

当前限制:我尝试自己完成此操作，但设置此输入时遇到困难。 1)我不知道如何确保用户可以编辑该值，也可以使用+/-按钮修改该值。 2)我也不知道如何在请求_onChange事件时自动更正该值。

HTML:

<div id="errors" style="
  background: #c00;
  color: #fff;
  display: none;
  margin: -20px -20px 20px;
  padding: 20px;
  white-space: pre-wrap;
"></div>
<div id="root"></div>
<script>
window.addEventListener('mousedown', function(e) {
  document.body.classList.add('mouse-navigation');
  document.body.classList.remove('kbd-navigation');
});
window.addEventListener('keydown', function(e) {
  if (e.keyCode === 9) {
    document.body.classList.add('kbd-navigation');
    document.body.classList.remove('mouse-navigation');
  }
});
window.addEventListener('click', function(e) {
  if (e.target.tagName === 'A' && e.target.getAttribute('href') === '#') {
    e.preventDefault();
  }
});
window.onerror = function(message, source, line, col, error) {
  var text = error ? error.stack || error : message + ' (at ' + source + ':' + line + ':' + col + ')';
  errors.textContent += text + '\n';
  errors.style.display = '';
};
console.error = (function(old) {
  return function error() {
    errors.textContent += Array.prototype.slice.call(arguments).join(' ') + '\n';
    errors.style.display = '';
    old.apply(this, arguments);
  }
})(console.error);
</script>

CSS:

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

REACT JS:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 5,
    };
    this._Plus = this._Plus.bind(this)
    this._Minus = this._Minus.bind(this)
    this._onChange = this._onChange.bind(this)
  }

  _Plus = () => {
    var val = this.state.count;
    if (val >= 10) {
      val = 10;
    } else if (val < 1) {
      val = 1;
    } else {
      val += 1;
    }
    this.setState({ count: val });
  }

  _Minus = () => {
    var val = this.state.count;
    if (val > 10) {
      val = 10;
    } else if (val <= 1) {
      val = 1;
    } else {
      val -= 1;
    }
    this.setState({ count: val });
  }

  _onChange = (e) => {
    var val = e.target.count;
    if (val > 10) {
      val = 10;
    } else if (val <= 1) {
      val = 1;
    }
    this.setState({ count: val });
  }

  render() {
    return (
      <div>
        <button onClick={this._Plus}>+</button>
        <input type="number" min = {1} max={10} defaultValue={5} value={this.state.count} onChange={this._onChange}/>
        <button onClick={this._Minus}>-</button>
      </div>
    );
  }
}

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);

Answer 1

我做了一些调整，并将验证放入模糊事件中，以允许用户输入任何数字，但一旦他们离开输入，就会受到限制。运行下面的代码片段看看它是否有效。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 5,
    };
  }
  
  validate = (val) => {
    if(val < 1){
      return 1;
    }else if(val > 10){
      return 10;
    }else{
      return val;
    }
  }
  
  step = (val) =>{
    const count = this.validate(this.state.count + val);
    if(count !== this.state.count){
      this.setState({count});
    }
  }

  onChange = (e) => {
    this.setState({ count: +e.target.value });
  }
  
  onBlur = (e) => {
    const count = this.validate(+e.target.value);
    if(count !== this.state.count){
      this.setState({count});
    }
  }

  render() {
    return (
      <div>
        <button onClick={() => this.step(1)}>+</button>
        <input 
          type="number" 
          min={1} 
          max={10} 
          defaultValue={5} 
          value={this.state.count} 
          onChange={this.onChange}
          onBlur={this.onBlur}
        />
        <button onClick={() => this.step(-1)}>-</button>
      </div>
    );
  }
}

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>