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

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

例如

初始£
用户添加10，结果：£10
用户修改变化10 - >5000，结果：£5000
用户在现场删除的一切，结果：£保持

占位符标记不起作用，因为在输入s时不可见在现场的东西。默认值也没有达到我想要的。

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

来源

2017-01-10 The worm

你为什么不打印标签，而不是文本框上？ – Imad

您可以1.将静态标签显示在输入的“顶部”。 2.输入更改时格式化值，附加货币符号。有一个静态标签的 –

似乎很合理，不需要处理输入数据很好 –

你可以用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" />

来源

2017-01-10 07:56:44

你可以通过简单地将一个元素与旁边input领域的符号做到这一点并设置padding-left（或text-indent）input字段本身：

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

来源

2017-01-10 08:21:29 mlunoe

您可以避免风格和只是简单的反应。输入值应该来自状态，变化应该给出一个新的状态。它的“控制部件”

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'));

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

来源

2017-01-10 11:25:34

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

回答

相关问题