如何在反应中只接受电话号码答案

【问题标题】：How to accept only number for phone in react如何在反应中只接受电话号码
【发布时间】：2020-02-21 20:26:32
【问题描述】：

我认为这可能是个愚蠢的问题，但相信我，我是新手。我正在处理表格我正在使用<input type="number"/> 在这里我正在实现数字目标（我的意思是它只会接受数字）但我想设置一些限制意味着用户将无法输入超过 8 个字符。我只想接受数字和限制 8 可以帮助我吗？

【问题讨论】：

<input type=tel > 或 pattern=^\d{7,8}$
你试过什么？问之前有没有研究过？如果有，你发现了什么？
@BrianThompson 是的，我已经这样做了。实际上我想取电话号码，它只接受号码而不接受其他字符，我想要字符限制意味着我只想允许用户输入 8 个字符
@dandavis 它也接受字母值。我只想要数值
是的，我明白这一点。但它是受控输入还是不受控输入。您是否将其值存储在状态中并使用onChange 处理程序对其进行更新？您将此标记为反应，但您没有给出任何反应代码。最终，这需要更多细节。

标签： javascript reactjs ecmascript-6

【解决方案1】：

只需为其添加模式和最大长度属性。

&lt;input type="text" pattern="\d*" maxlength="8"/&gt;

如果只想使用数字，请按如下方式使用：

&lt;input type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==8) return false;" /&gt;

【讨论】：

它也接受字母值我只想要数值和限制
它给我错误，请更新您的反应答案
@Jonas 你能更具体地说明你遇到的错误吗？
@Gabriel 我试过了，但什么也没发生 onKeyPress={e => { let { value } = e.target; if (value.length

【解决方案2】：

假设您在这里使用受控输入，您可能会这样做。

我们将replace 与只允许数字的正则表达式一起使用。 如果你不关心支持 IE，你可以跳过这个，只依赖type="number"。

然后我们将使用slice，起始位置为 0，结束位置为 8，因为您希望限制为 8 位数字。如果您需要的不是 8，只需更改此数字即可。

class Example extends React.Component {
  state = {
    value: ''
  }
   
  onChange = e => {
    // Separated into 3 steps for clarity
    let onlyNumbers = e.target.value.replace(/[^\d]/g, '');
    let limitToEight = onlyNumbers.slice(0, 8);

    this.setState({ value: limitToEight });

    // In one line:
    // this.setState({ value: e.target.value.replace(/[^\d]/g, '').slice(0, 8) })
  }
  
  render() {
    return <input type='number' value={this.state.value} onChange={this.onChange} />
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root" />

【讨论】：

如何限制字符？我只想接受 8 个字符
你运行了 sn-p 吗？它限制为 8 个。.slice(0,8)

【解决方案3】：

如果字符的长度小于限制设置状态，则检查字符的长度，如果大于则不设置状态。

handleInput = e => {
  e.persist();

  this.setState(prevState => {
    return {
      input: e.target.value.length < 9 ? e.target.value : prevState.input
    };
  });
};

class App extends React.Component {
  state = {
    input: ""
  };

  handleInput = e => {
    e.persist();

    this.setState(prevState => {
      return {
        input: e.target.value.length < 9 ? e.target.value : prevState.input
      };
    });
  };

  render() {
    return (
      <div>
        <input
          value={this.state.input}
          type="number"
          onChange={this.handleInput}
        />
        <p>typed: {this.state.input}</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root" />

【讨论】：