添加＆＃34;％＆＃34;在react-toolbox输入编号内显示的值的后缀

Question

我有react-toolbox input component类型＆＃34;数字＆＃34;如下：

<Input
    type="number"
    step="0.01"
    value={itemValue}
    onChange={this.handleInputChange.bind(this, item)}
/>

显示2.68

那么，是否可以在输入字段

中显示为2.68％

此外，＆＃34;％＆＃34;只要值发生变化，就应该保留后缀。

Answer 1

React-toolbox的<Input />是一个带有普通<input>标记的div作为孩子 - 你总是可以使用一些CSS来获得你想要的东西，将适当的className添加到你的组件的用法。

.rt-input-input {
  position: relative;
  display: inline-block;
}

.rt-input-input::after {
  content: '%';
  font-family: sans-serif;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  right: 5px;
  
  transform: translateY(-50%);
}

<div class="rt-input-input">
  <input type="text" value="2.68" />
</div>

  

请注意，这不适用于常规input代码，因为它们没有before/after伪元素