が内部表示値に私は、次のようなタイプで<a href="https://github.com/react-toolbox/react-toolbox/tree/dev/components/input#input" rel="nofollow noreferrer">react-toolbox input component</a>「番号」を持って反応し、ツールボックスを入力番号

Question

「％」サフィックスを追加します。

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

それらが反応する、ツールボックスの入力コンポーネントクラスとして