當輸入值被滑塊改變時設置狀態 - ReactJS

所以我使用這個基礎滑塊：click for doc。爲了訪問滑塊的當前價值，他們建議使用隱藏的輸入，像這樣：當輸入值被滑塊改變時設置狀態 - ReactJS

<div class="slider" data-slider data-initial-start="50" data-end="200"> 
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"> 
</span> 
<span class="slider-fill" data-slider-fill></span> 
<input type="hidden"> 
</div>

我想要做的就是旁邊的滑塊使用一些變量顯示的值。我的想法是使用類似onChange（）的方法來監聽輸入值的變化，並將其設置爲一個函數來設置狀態，從而調用具有更新值的渲染函數。問題在於，這隻有在用戶輸入值以及滑塊更改它不調用onChange（）或我嘗試的任何其他函數時才起作用。這裏是我的代碼：

功能即是應該被觸發：

onValueChange: function() { 
    this.setState({ 
    setTemp: this.refs.location.value 
    }); 
},

內部渲染功能：

var {setTemp} = this.state; 

<div className="controlPanel"> 
    <div className="slider vertical" data-slider data-initial-start={curTemp} data-step="5" data-end="110" data-vertical="true"> 
     <span className="slider-handle" data-slider-handle role="slider" tabIndex="1" onClick={this.onValueChange}></span> 
     <span className="slider-fill" data-slider-fill></span> 
     <input id="tempInput" type="hidden" ref="location" onChange={this.onValueChange}/> 
    </div> 
</div> 
     <div className="currentStats"> 
     Temp: {setTemp} 
     </div>

我試圖在滑塊本身添加的onClick，onMove功能和它的工作，但我只有當滑塊的值發生更改時，才需要調用該功能

任何創意？

來源

2017-06-03 jwm0

反應滑塊的代碼，你可以參考 - HTTPS：/ /github.com/mpowaga/react-slider/blob/master/react-slider.js – vijayst

根據其文檔，您可以收聽moved.zf.slider事件。

$('.slider').on('moved.zf.slider', function() { 
    // update state 
}

或者你可以綁定滑塊外部輸入和獲得輸入值：

<div class="small-10 columns"> 
    <div class="slider" data-slider data-initial-start="50"> 
    <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput1"></span> 
    <span class="slider-fill" data-slider-fill></span> 
    </div> 
</div> 
<div class="small-2 columns"> 
    <input type="number" id="sliderOutput1"> 
</div>

參考： http://foundation.zurb.com/sites/docs/slider.html#js-events

來源

2017-06-03 14:06:02 SLee

我在哪裏可以調用jQuery函數？我試着在ComponentDidMount函數中調用它 - 我做錯了嗎？第二個選項意味着值正在輸入字段中顯示，並且您可以控制該值，但在移動滑塊時仍不會調用該函數。 – jwm0

@ jwm0 ComponentDidMount函數似乎是正確的。 https://codepen.io/sam_lee/pen/owNppV我沒有嘗試基於reactjs，但這應該以相同的方式工作。對於第二個選項，我想你可以添加onChange來輸入組件。 – SLee

jquery方法奏效！謝謝你，芬妮讓它工作。順便說一句，我創建的頁面是一個控制面板，會有很多幻燈片和開關。將所有控件的狀態保存在一個組件（類）中還是應該將組件分成更小的組件（一個滑塊是一個類）是一個好主意？ – jwm0

當輸入值被滑塊改變時設置狀態 - ReactJS

回答

相關問題