Установка значения по умолчанию для поля ввода в React?

Question

Я хочу установить поле ввода, которое пользователь может ввести с помощью знака £, закрепленного в этом поле. Пользователь не должен удалять или изменять этот знак, но пользователь должен иметь возможность изменять то, что приходит после.

например.

1. первоначальный пользователь £
2. добавляет 10, результат: £10
3. изменены пользователем изменения 10 ->5000, результат: £5000
4. пользователь удаляет все в поле, результат: £ остается

Тег-заполнитель не работает, поскольку это не видно при вводе s что-то в поле. Значение по умолчанию также не совсем то, что я хочу.

Place your stake: <input type="text" onChange={this.handleStakeChange}/> 

Answer 1

Вы можете сделать это легко с помощью CSS, и фоновое изображение:

.pounds-input { 
 
    padding: 0 0 0 20px; 
 
    background: url(https://cdn1.iconfinder.com/data/icons/business-finance-1-1/128/currency-sign-pound-128.png) no-repeat; 
 
    background-size: 12px 12px; 
 
    background-position: 2px 2px; 
 
}

<input class="pounds-input" type="number" />

Answer 2

Вы можете сделать это, просто помещая элемент с символом рядом с input поле и установить padding-left (или text-indent) на поле input:

.currency { 
 
    position: relative; 
 
    left: 15px; 
 
} 
 
input { 
 
    padding-left: 12px; 
 
    /* or text-indent: 12px; */ 
 
}

<label>Place your stake:</label> 
 
<span class="currency">£</span> 
 
<input type="number" />

Answer 3

Вы можете избежать стили и просто обычный React. Входные значения должны поступать из состояния, а изменение должно давать новое состояние. Это понятие «контролируемых компонентов»

https://facebook.github.io/react/docs/forms.html#controlled-components

Таким образом, вы имеете полный контроль над что происходит и происходит от входных элементов. Государство является источником истины.

var StakeInput = React.createClass({ 
getInitialState: function(){ 
    return {stake: ''} 
}, 
handleStakeChange: function(e){ 
    const stakeInputValue = e.target.value.replace(/£/g, '').trim() 
    this.setState({ 
    stake: stakeInputValue 
    }); 
}, 
render: function(){ 
    return (
    <div> 
    Place your stake: 
     <input type="text" value={'£ ' + this.state.stake} 
     onChange={this.handleStakeChange}/> 
    </div> 
) 

    } 
}); 
React.render(<StakeInput />, document.getElementById('output')); 

http://jsbin.com/jemasub/edit?html,js,output