Reactjs按鍵正則表達式？

使用ReactJS，我想設置一個按鍵正則表達式偵聽器。我的代碼如下。Reactjs按鍵正則表達式？

formation: function() { 
    var f1c = document.getElementsByClassName('f1t').value; 
    var validator = new RegExp('^[0-9.]*$'); 
    var runner = validator.test(f1c); 
    var bling = document.getElementById('f1p2'); 

    if (runner) { 
    alert("Vegetables"); 
    } else { 
    alert("Fruits"); 
    } 
},

這是從一個單獨的函數調用的，就像這樣。

something: function() { 
    return (
    <input type="text" className="f1t" onKeyUp={this.formation}>something</p> 
); 
}

問題是，只有當我刪除if參數時，keyup事件纔會運行，這意味着keyup可以工作。但是，我的邏輯必須有一些東西。

如上圖所示，如果f1c的值不是數字，則只顯示fruit時，上述代碼會一直顯示Fruits。

來源

2016-07-26 Jason Chen

嘗試在你的處理程序中使用'console.log（f1c）'，看看會發生什麼 – webdeb

你的第一個塊是無效的javascript ...這裏有一些語法錯誤。你能修好它嗎？你的if/else不會工作的一件事 –

是的，我的console.log返回'undefined.'所以我將'ElementsByClassName'改爲'ID'，並且它返回了它應該做的。 –

當用戶按下一個鍵，以及事件觸發，該功能將得到元素的引用和鑰匙形式爲React synthetic event。

formation: function(e) { 
    var theKeyPressed = e.charCode; // this is normalized for you by React 
    var theElementPressed = e.target; 
    var theValueOfTheElement = e.target.value; 
    // do your thing 
}, 

something: function() { 
    return (
    <input type="text" className="f1t" onKeyUp={this.formation}>something</p> 
); 
}

FYI，type="text"現在是多餘的，這是默認設置。

來源

2016-07-26 23:22:43

直接訪問React中的DOM並不好。看看下面的鏈接查看最佳實踐處理表單更新：

https://facebook.github.io/react/docs/forms.html

<input type="text" onKeyUp={this.formation}>something</p> 

formation: function(event) { 
    var f1c = event.target.value; 
    ... 

}

來源

2016-07-26 20:08:10 chardy

Reactjs按鍵正則表達式？

回答

相關問題