Setting a default value to an input field in React?

Question

I want to set an input field a user can type into with a £ sign fixed into that field. The user should not be able to delete or change this sign, but the user should be able to modify what comes after.

e.g.

initial £
user adds 10, result: £10
user modified changes 10 -> 5000, result: £5000
user deletes everything in the field, result: £ remains

The placeholder tag does not work as this is not visible when entering something in the field. The default value is also not doing quite what I want.

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

You can either 1. have a static label appear "on top" of the input. 2. format the value when the input changes, appending the currency sign. — Oro
– Oro, Commented Jan 10, 2017 at 7:50
having a static label seems resonable, not having to process input data much is good — Syed Faizan
– Syed Faizan, Commented Jan 10, 2017 at 7:51

Ori Drori · Accepted Answer · 2017-01-10 08:57:03Z

3

You can do so easily with CSS, and a background image:

.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" />

edited Jan 10, 2017 at 8:57

answered Jan 10, 2017 at 7:56

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mlunoe · Accepted Answer · 2017-01-10 08:34:45Z

2

You can do this by simply placing an element with the symbol next to the input field and setting padding-left (or text-indent) on the input field itself:

.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" />

edited Jan 10, 2017 at 8:34

answered Jan 10, 2017 at 8:21

mlunoe

4,4904 gold badges35 silver badges45 bronze badges

Comments

Giorgio Bozio · Accepted Answer · 2017-01-10 11:25:34Z

You can avoid styles and just do plain React. Input values should come from state and change should give a new state. It's the concept of "controlled components"

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

In this way you have full control on what goes and comes from input elements. The state is the source of truth.

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

Collectives™ on Stack Overflow

Setting a default value to an input field in React?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related