javascript - 连接多个输入类型编号

Question

我需要做这样的事情。 6 个输入字段类型编号。每个标签都有 min 和 max。问题是如果我把红色 0 - 50 然后黄色不能从 49-70 它需要自动增加或减少取决于它周围的数字所以它总是一个接一个？我正在使用 React。

是否有一些小部件或连接多个数字输入的方法？

Answer 1

如果您想要支持键盘输入，您将必须在 onBlur 处理程序中更新数字输入的范围，并在 onChange 中更改输入值。下面是一个带有自定义 InputNumber 组件的示例，它隐藏了这个 onBlur/onChange 细节:

class InputNumber extends React.Component {
  state = {
    value: this.props.value
  }
  
  onChange = e => {
    this.setState({ value: +e.target.value });
  };
  
  onBlur = e => {
    this.props.onChange(this.state.value);
  };
  
  componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.state.value) {
      this.setState({ value: nextProps.value });
    }
  }
  
  render() {
    return <input
      type='number'
      {...this.props}
      value={this.state.value}
      onChange={this.onChange}
      onBlur={this.onBlur}
    />;
  }
}

class Demo extends React.Component {
  state = {
    ranges: [[1, 50], [51, 70], [71, 100]]
  };
  
  render() {
    const { rangeRed, rangeYellow, rangeGreen } = this.state;
    const controls = [
      this.range('Red Scoring Range', 'red', 0),
      this.range('Yellow Scoring Range', 'yellow', 1),
      this.range('Green Scoring Range', 'green', 2)
    ];
    return <table className='controls'>{controls}</table>;
  }
  
  range(label, color, idx) {
    const { ranges } = this.state;
    return (
      <tr className='control-row'>
        <td className='label'>{label}</td>
        <td><div className={color + ' bullet'}></div></td>
        <td>
          <InputNumber
            value={ranges[idx][0]}
            onChange={this.onChange(idx, true)}
            min={ranges[idx-1 < 0 ? 0 : idx-1][0] + 2}
            max={ranges[idx][1] - 1}
            disabled={idx === 0} />
        </td>
        <td>to</td>
        <td>
          <InputNumber
            value={ranges[idx][1]}
            onChange={this.onChange(idx, false)}
            min={ranges[idx][0] + 1}
            max={ranges[(idx+1) % ranges.length][1]-2}
            disabled={idx === ranges.length-1} />
        </td>
      </tr>
    );
  }
  
  onChange = (idx, isMin) => v => {
    const ranges = [...this.state.ranges];
    const min = isMin ? ranges[idx-1 < 0 ? 0 : idx-1][0] + 2 : ranges[idx][0] + 1;
    const max = isMin ? ranges[idx][1] - 1 : ranges[(idx+1) % ranges.length][1]-2;
    v = Math.min(Math.max(min, v), max);
    if (!isMin && idx < ranges.length-1) {
      ranges[idx][1] = v;
      ranges[idx+1][0] = v+1;
    } else if (isMin && idx > 0) {
      ranges[idx][0] = v;
      ranges[idx-1][1] = v-1;
    }
    this.setState({ ranges });
  }
}

ReactDOM.render(<Demo />, document.getElementById('app'));

:root {
  --bullet-size: 15px;
}

* {
  color: #555;
}

.bullet {
  display: inline-block;
  height: var(--bullet-size);
  width: var(--bullet-size);
  border-radius: var(--bullet-size);
}

.red { background: red; }
.yellow { background: yellow; }
.green { background: green; }

td { padding: 5px; }

input {
  width: 50px;
  padding: 5px;
  border: solid 1px #ccc;
  border-radius: 3px;
}

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

如果您想要瞬时更新范围并且不关心键盘输入，则直接在 onChange 处理程序中更新范围:

class Demo extends React.Component {
  state = {
    ranges: [0, 50, 70, 100]
  };
  
  render() {
    const { rangeRed, rangeYellow, rangeGreen } = this.state;
    const controls = [
      this.range('Red Scoring Range', 'red', 0),
      this.range('Yellow Scoring Range', 'yellow', 1),
      this.range('Green Scoring Range', 'green', 2)
    ];
    return <table className='controls'>{controls}</table>;
  }
  
  range(label, color, idx) {
    const { ranges } = this.state;
    return (
      <tr className='control-row'>
        <td className='label'>{label}</td>
        <td><div className={color + ' bullet'}></div></td>
        <td>
          <input
            type='number'
            value={ranges[idx] + 1}
            onChange={this.onChange(idx, true)}
            max={ranges[idx+1] - 1}
            disabled={idx === 0} />
        </td>
        <td>to</td>
        <td>
          <input
            type='number'
            value={ranges[idx+1]}
            onChange={this.onChange(idx+1, false)}
            min={ranges[idx] + 1}
            disabled={idx+1 === ranges.length-1} />
        </td>
      </tr>
    );
  }

  onChange = (idx, isMin) => e => {
    const ranges = [...this.state.ranges];
    const value = isMin ? +e.target.value - 1 : +e.target.value;
    if (isMin && value > ranges[idx - 1] + 1 && value < ranges[idx + 1] + 1)
      ranges[idx] = value;
    if (!isMin && value < ranges[idx + 1] - 1 && value > ranges[idx - 1] + 1)
      ranges[idx] = value;
    this.setState({ ranges });
  };
}

ReactDOM.render(<Demo />, document.getElementById('app'));

:root {
  --bullet-size: 15px;
}

* {
  color: #555;
}

.bullet {
  display: inline-block;
  height: var(--bullet-size);
  width: var(--bullet-size);
  border-radius: var(--bullet-size);
}

.red { background: red; }
.yellow { background: yellow; }
.green { background: green; }

td { padding: 5px; }

input {
  width: 50px;
  padding: 5px;
  border: none;
  border:solid 1px #ccc;
  border-radius: 3px;
}

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