reactjs - 将“%”后缀添加到 react-toolbox 输入编号内显示的值

Question

我有一个类型为“number”的react-toolbox 输入组件，如下所示：

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

它显示 2.68

那么，是否可以在输入字段内将其显示为 2.68%

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

Answer 1

React-toolbox's<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伪元素