向 react-toolbox 输入数字中显示的值添加“%”后缀

Question

我有一个 react-toolbox input component 类型 "number" 如下：

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

显示2.68

所以，是否可以在输入字段中将其显示为 2.68%

此外，“%”后缀应在值更改时保持显示。

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>

Note this won't work on regular input tags, as they have no before/after pseudo-elements

向 react-toolbox 输入数字中显示的值添加“%”后缀

Add "%" suffix to value displayed inside react-toolbox input number

reactjs

react-toolbox