Question

我有一个输入字段，我希望以货币格式显示，但任何值都是一个简单的整数。 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人群来说是一个很好的问题，肯定有人之前遇到过这个要求吗？

感谢有关此事的任何意见！（没有双关语）

Answer 1

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>

Answer 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>

在Reactjs中，如何显示从实际值

2 个答案: