Question

我想设置一个用户可以输入的输入字段，并在该字段中固定£符号。用户不应该删除或更改此标志，但用户应该能够修改之后的内容。

e.g。

initial £
用户添加10，结果：£10
用户修改的更改10 - ＆gt; 5000，结果：£5000
用户删除字段中的所有内容，结果：£仍为

占位符标记不起作用，因为在字段中输入内容时不可见。默认值也没有达到我想要的效果。

Place your stake: <input type="text" onChange={this.handleStakeChange}/>

Answer 1

您可以使用CSS和背景图片轻松完成：

.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" />

Answer 2

您只需在input字段旁边放置符号并在padding-left字段本身上设置text-indent（或input），即可实现此目的：< / p>

＆＃13;

.currency {
  position: relative;
  left: 15px;
}
input {
  padding-left: 12px;
  /* or text-indent: 12px; */
}

＆＃13;

<label>Place your stake:</label>
<span class="currency">£</span>
<input type="number" />

＆＃13;

Answer 3

您可以避免使用样式，只需执行简单的React。输入值应来自状态，更改应提供新状态。这是“受控组件”的概念

https://facebook.github.io/react/docs/forms.html#controlled-components

通过这种方式，您可以完全控制输入元素的来源和输入。国家是真理的源泉。

convertProductfields: function (articlesFromAurelia){

    var allPromises = articlesFromAurelia
                      .map(post => new Promise((resolve, reject) => {
                               Categories.find({name: post.Categoria})
                                .then((category) => resolve(category))
                                .fail((error) => reject(error))
                               }));
    return Promise.all(allPromises);
}

http://jsbin.com/jemasub/edit?html,js,output

在React中将默认值设置为输入字段？

3 个答案: