html5输入类型范围总是指向最小值并且没有在文本输入上获得onChange

Question

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

在我下面的代码中

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

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

          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]: https://i.stack.imgur.com/w5MZ6.png

Answer 1

下面的代码将解决您的问题，现在只使用单个状态对象在两个控件中显示值，它可以以两种方式工作，无论是更改输入值还是滑块。

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;