我有一个输入字段,我希望以货币格式显示,但任何值都是一个简单的整数。 IE浏览器。我希望用户看到 $ 5.00 ,但输入的实际值为 5 (这也是传递给组件的值)。
我最初的目的是:
<input type="text" onChange={this.setValue} value={inputValue}>
{inputValue === '' ? 'None' : I18n.l('currency', inputValue)}
</input>
但是当我跑步时我得到一个错误:
invariant.js?未捕获的不变违规:input是一个void元素标记,不得为
children
或使用props.dangerouslySetInnerHTML
。
我认为这对StackOverflow人群来说是一个很好的问题,肯定有人之前遇到过这个要求吗?
感谢有关此事的任何意见! (没有双关语)
答案 0 :(得分:2)
input
类型不能生孩子,但您可以在输入的左侧显示货币吗?
<span>$</span>
<input type="text" onChange={this.setValue} value={inputValue} />
甚至可以创建一组输入来表示货币值的不同部分:
<span>$</span>
<input type="text" onChange={this.setDollars} value={inputDollars} />
<span>.</span>
<input type="text" onChange={this.setCents} value={inputCents} />
甚至只是预览:
<input type="text" onChange={this.setValue} value={inputValue} />
<div>Value is: {inputValue === '' ? 'None' : I18n.l('currency', inputValue)}</div>
答案 1 :(得分:2)
input
是自我关闭的html元素,因此你不能将子句传递给它(反应不变的错误)。您可以在不同元素(例如span)中显示货币:
<div>
<input type="text" onChange={this.setValue} value={inputValue} />
<span>{inputValue === '' ? 'None' : I18n.l('currency', inputValue)}</span>
</div>
您还可以创建自己的接受子项的输入元素,例如:
const MyTextInput = props => (
<div>
<input type="text" onChange={this.props.onChange} value={this.props.value} />
<span>
{props.children}
</span>
</div>
);
// ... and use it
<MyTextInput onChange={this.setValue} value={inputValue}>
{inputValue === '' ? 'None' : I18n.l('currency', inputValue)}
</MyTextInput>