React Phone Number input format and Output without format

Question

我正试图在输入中创建一个电话号码格式并且在它下面的输出上没有电话号码格式。我还想添加一个条件，即如果用户键入的条目超过10个，则输入中将不再有电话格式。

此外，请告诉我，如果没有react数字格式库，是否有任何方法可以做到这一点。

应用程序.js

import React, { Component } from 'react';
import NumberFormat from 'react-number-format';
class App extends Component {
state ={
userInput: ''
}

inputChangedHandler = (event) => { 
this.setState({userInput: event.target.value});
}
render() {
return (
<div className="App">
<input type="number"
name="phoneNumberInput"
placeholder='Phone Number Here'
onChange={this.inputChangedHandler}
value={this.state.userInput}/>
<p><strong>Value: </strong>+1{this.state.userInput}</p>
<NumberFormat 
format="(###) ###-####" mask=""
name="phoneNumberInput"
placeholder='Phone Number Here'
onChange={this.inputChangedHandler}
value={this.state.userInput}/>
<p><strong>Value: </strong>+1{this.state.userInput}</p>
</div>
);
}
}
export default App;

Answer 1

从react number格式文档中，您可以使用返回值对象的onValueChange函数。

inputChangedHandler = (values) => {
this.setState({
userInput: values,
});
}

然后我们使用this.state.userInput.value来获得未格式化的值。

<NumberFormat
format="(###) ###-####"
mask=""
name="phoneNumberInput"
placeholder="Phone Number Here"
onValueChange={this.inputChangedHandler}
value={this.state.userInput.value}
/>
<p><strong>Value: </strong>+1{this.state.userInput.value}</p>