html5輸入類型范圍始終指向最小值而不是on文本輸入

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;