在React中格式化數字時停止光標跳轉

我的反應組件上有一個輸入字段，顯示某個項目的行價格（帶有數千個分隔符的小數點後兩位）。我希望顯示的值在組件首次呈現時以金錢格式顯示，並且在字段中以用戶類型的形式保存爲貨幣格式。在React中格式化數字時停止光標跳轉

此刻，我有下面的代碼在我的組件：

var React = require('react'); 
import accounting from 'accounting'; 

MoneyInput = React.createClass({ 
    propTypes: { 
     name: React.PropTypes.string.isRequired, 
     onChange: React.PropTypes.func.isRequired, 
     value: React.PropTypes.number, 
     error: React.PropTypes.string, 
    }, 

    onChange(event) { 
     // get rid of any money formatting 
     event.target.value = accounting.unformat(event.target.value); 

     // pass the value on 
     this.props.onChange(event); 
    }, 

    getValue() { 
     return accounting.formatNumber(this.props.value, 2) 
    }, 

    render() { 

     return (
       <div className="field"> 
        <input type="text" 
          name={this.props.name} 
          className="form-control" 
          value={this.getValue()} 
          onChange={this.onChange} /> 
        <div className="input">{this.props.error}</div> 
       </div> 
     ); 
    } 
}); 

module.exports = MoneyInput;

該代碼會顯示正確格式化的數據，但每次我輸入一個值，光標跳到號結束。

我明白爲什麼會發生這種情況（我認爲），並且我在這裏閱讀了幾個與在JavaScript中不丟失光標位置相關的問題（例如，here和here）。

我想知道的是在React中處理這個問題的最好方法是什麼？我認爲理想情況下我不想將光標位置保存在狀態中（例如，我希望這些位置是Presentation Components in Dan Abramov syntax），那麼還有其他方法嗎？

來源

2016-02-21 tomRedox

您好已在github.com https://github.com/facebook/react/issues/955的問題關於這個討論，參見

你可能想使用的輸入組件藏漢setstate這年11月30日評論。

來源

2016-02-21 12:12:42

哦，這很有趣，謝謝... Re'你可能想在輸入組件上使用setstate' - 你可以擴展嗎？我對React很陌生，一直在根據可能的錯誤理解努力工作，您應儘可能避免使用狀態？ – tomRedox

嘿，湯姆，是的，狀態很好，可以用在輸入組件上，或者說一個通過數組顯示3個項目的組件。想想我真的需要我的應用程序的這種狀態是全球性的嗎？大多數事情將是全球性的，並通過你的商店。 –

set value(val) { // Set by external method 
    if(val != this.state.value) { 
     this.setState({value: val, randKey: this.getKey()}); 
    } 
} 

getKey() { 
    return 'input-key' + parseInt(Math.random() * 100000); 
} 

onBlur(e) { 
    this.state.value = e.target.value; // Set by user 
    if(this.props.blur) this.props.blur(e); 
} 

render() { 
    return(
<input className="te-input" type="text" defaultValue={this.state.value} onBlur={this.onBlur} key={this.state.randKey} /> 
    ) 
}

如果你需要輸入這還沒有光標移動既可編輯和可從外部以及你應該使用默認值，當值改變外部用不同的鍵渲染輸入設置。

來源

2017-01-31 12:15:23 yairniz

在React中格式化數字時停止光標跳轉

回答

相關問題