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

Posted 2023-05-08

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

【英文标题】：html5 input type range always pointing to min value and not getting onChange on text input

【发布时间】：2019-08-26 06:37:50

【问题描述】：

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

在我下面的代码中

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

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

          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

【参考方案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;

【讨论】：

谢谢它的工作:) 我想这是我出错的地方 value=this.state.value ? this.state.value : UpperBound 以及 onInput 而不是 onChange