javascript - html5输入类型范围始终指向最小值并且在文本输入上没有得到onChange

Question

我正在尝试使用输入类型文本以及输入类型范围，其中存在三个用例。1.defaultcase:加载页面时， slider 应指向文本输入字段中给出的值。2. 当用户输入文本值时， slider 指针也应该更新。3. 当用户使用 slider 更改值时，文本值应该更新。

在我的下面的代码中

1. 在默认情况下:在输入类型范围内，当我给出 defaultValue="200"时， slider 指针始终指向最小值。
2. 当我在文本区域中输入值时， slider 没有更新。

我尝试了一些方法来修复它，但失败了。

          if (
          Type == "integer" &&
          LowerBound &&
          UpperBound !== 0
        ) {
          editComponent = (
            <div className="SettingsTreeValueNode__InputField">
              <input
                type="text"
                pattern="[0-9]*"
                ref="text"
                value={this.state.value}
                oninput={this.handleinputChanged.bind(this)}
                className="inputtext"
                onBlur={e => this.focusOfInputLost(e)}
              />
              {LowerBound}
              <input
                type="range"
                className="sliderinput"
                defaultValue="200"
                min={LowerBound}
                max={UpperBound}
                step="1"
                oninput={this.handleSliderChange.bind(this)}
                onMouseUp={this.handleWhenMouseReleased.bind(this)}
              />
              {UpperBound}
            </div>
          );
        }
        handleSliderChange(event) {
      var value = event.target.value;
      var slidervalue = parseInt(value);
      this.setState({ value: slidervalue });
    }

    handleInputChanged(event) {
    var value = event.target.validity.valid
     ? event.target.value
     : this.state.value;
    this.setState(
      {
       value: value,
       inputValid: this.isInputValid()
      });
      }

´´´[![slider along with text area][1]][1]


  [1]: /image/w5MZ6.png

Answer 1

下面的代码将解决您的问题，仅使用单个状态对象在两个控件中显示值，现在它可以以两种方式工作:更改输入或 slider 上的值。

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ""
    };
  }

  handleSliderChange = (event) => {
    var value = event.target.value;
    var slidervalue = parseInt(value);
    this.setState({ value: slidervalue });
  }

  handleInputChanged = (event) => {
    var value = event.target.validity.valid
      ? event.target.value
      : this.state.value;
    this.setState(
      {
        value: value
      });
  }
  render() {
    let LowerBound = 0;
    let UpperBound = 200
    return (
      <div>
        <button onClick={this.handleCopy}>click me</button>
        <div className="SettingsTreeValueNode__InputField">
          <input
            type="text"
            pattern="[0-9]*"
            ref="text"
            value={this.state.value}
            onInput={this.handleInputChanged}
            className="inputtext"
          />
          {LowerBound}
          <input
            type="range"
            className="sliderinput"
            defaultValue="200"
            min="0"
            max="200"
            step="1"
            value={this.state.value ? this.state.value : UpperBound}
            onInput={this.handleSliderChange}
          />
          {UpperBound}
        </div>
      </div>
    );
  }
}
export default App;