ユーザーが入力できる入力フィールドを£の記号をそのフィールドに固定して設定したいとします。ユーザーはこの記号を削除または変更できないはずですが、ユーザーは後で変更する必要があります。React？の入力フィールドにデフォルト値を設定していますか？
£5000
£は5000、結果
£10
10：
£10、結果を追加します sを入力したときに表示されないため、プレースホルダタグは機能しません野外での何か デフォルト値は、私が望んでいるものとはまったく同じことをしていません。あなたがCSSでそう簡単に行うことができます
Place your stake: <input type="text" onChange={this.handleStakeChange}/>
、背景画像：
.pounds-input {
padding: 0 0 0 20px;
background: url(https://cdn1.iconfinder.com/data/icons/business-finance-1-1/128/currency-sign-pound-128.png) no-repeat;
background-size: 12px 12px;
background-position: 2px 2px;
}<input class="pounds-input" type="number" />あなたは単にinputフィールドに次のシンボルを持つ要素を配置することによって、これを行うことができますinputフィールドにpadding-left（またはtext-indent）を設定します。
.currency {
position: relative;
left: 15px;
}
input {
padding-left: 12px;
/* or text-indent: 12px; */
}<label>Place your stake:</label>
<span class="currency">£</span>
<input type="number" />あなたはスタイルを避けることができますし、単なるリアクトありません。入力値は状態から来て、変化は新しい状態を与えるはずです。それはあなたが行くと、入力要素から来るものを完全に制御を持っている。このように
https://facebook.github.io/react/docs/forms.html#controlled-components
「制御要素」のコンセプトです。国家は真実の源泉です。
var StakeInput = React.createClass({
getInitialState: function(){
return {stake: ''}
},
handleStakeChange: function(e){
const stakeInputValue = e.target.value.replace(/£/g, '').trim()
this.setState({
stake: stakeInputValue
});
},
render: function(){
return (
<div>
Place your stake:
<input type="text" value={'£ ' + this.state.stake}
onChange={this.handleStakeChange}/>
</div>
)
}
});
React.render(<StakeInput />, document.getElementById('output'));
なぜあなたは、ラベルの代わりに、テキストボックスの上にいることを印刷していけませんか？ – Imad
次のいずれかを行うことができます。1.静的ラベルを入力の「上」に表示させる。 2.入力が変更されたときに値をフォーマットし、通貨記号を追加します。 –
は静的なラベルを持っているように見えますが、入力データを処理する必要はありません。 –