Question

我需要创建一个文本框字段来生成coutry代码。所以我需要把第一个字母作为“+”符号。然后使它不是该符号的可编辑字段。

_handlePhoneNumber(e) {
    var curState = {};
    var valueLength = e.target.value.length;
    var currentValue = e.target.value;
    console.log(currentValue);  

    curState[e.target.name] = this.mobileOnly(currentValue);
    this.setState(curState);
}

<input type="tel" name="countryCode" value={this.state.countryCode} onChange={this._handlePhoneNumber.bind(this)} />

Answer 1

将this.state.countryCode的初始值定义为+：

this.state = {
   countryCode: '+'
}

在onChange内部功能检查用户输入的值的长度，如果 length == 0 ，则不更新状态值。通过这种方式，用户将无法删除+符号，因为当长度等于0时，我们不会更新状态。

像这样：

_handlePhoneNumber(e) {
    if(e.target.value.length > 0){        //then only update the state value

        this.setState({
            [e.target.name]: this.mobileOnly(e.target.value)
        });

    }
}

注意： e.target.value将始终包含+作为第一个字符，因此在应用任何验证或进行计算之前，请先删除+。

<强>建议：

您也可以使用MaskedInput Lib，它提供了所有这些功能。

选中工作代码段：

class App extends React.Component{
   constructor(){
      super();
      this.state = {
         value: '+'
      }
      this._onChange = this._onChange.bind(this);
   }
   
   _onChange(e){
      let val = e.target.value;
      if(val.length > 0 && this._isNumeric(val)){
          this.setState({
              [e.target.name]: val
          })
      }else if(val.length == 1){
          this.setState({
              [e.target.name]: '+'
          })
      }
   } 
   
   _isNumeric(val){
       return /^\d+$/.test(val.substr(1));
   }
   
   
   render(){
      return(
         <div>
            <input name='value' value={this.state.value} onChange={this._onChange}/>
         </div>
      )
   }   
}

ReactDOM.render(<App/>, document.getElementById('container'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='container'/>

Answer 2

如果您有多个输入字段，我建议您使用jQuery mask api，它与上面的答案中的代码相同。这是链接：https://igorescobar.github.io/jQuery-Mask-Plugin/

如何在React js中使文本框第一个值不可编辑？

2 个答案: