在 React 中为输入字段设置默认值？答案

【问题标题】：Setting a default value to an input field in React?在 React 中为输入字段设置默认值？
【发布时间】：2017-01-10 07:46:00
【问题描述】：

我想设置一个用户可以输入的输入字段，并在该字段中固定一个£ 符号。用户应该不能删除或更改此标志，但用户应该能够修改后面的内容。

例如

初始£
用户添加10，结果：£10
用户修改更改10 -> 5000，结果：£5000
用户删除该字段中的所有内容，结果：£ 仍然存在

占位符标签不起作用，因为在字段中输入内容时它不可见。默认值也不是我想要的。

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

【问题讨论】：

为什么不在标签而不是文本框上打印呢？
您可以 1. 让静态标签出现在输入的“顶部”。 2. 输入变化时格式化值，附加货币符号。
有一个静态标签似乎是合理的，不必过多处理输入数据是好的
@syedfaizan 那会住在哪里？
@Imad 如果可能的话，我希望它在输入框中

标签： javascript reactjs

【解决方案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;
}

&lt;input class="pounds-input" type="number" /&gt;

【讨论】：

【解决方案2】：

您只需在input 字段旁边放置一个带有符号的元素，然后在input 字段本身上设置padding-left（或text-indent）即可：

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

【讨论】：

【解决方案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

【讨论】：