我在处理 React 的 NumberFormat
格式时遇到问题。
如果用户输入 10 个数字,我需要它变成 format="(###) ###-####"
,但是当用户输入第 11 个数字时,格式必须被丢弃,但数字仍然显示。
这是我到目前为止尝试过的:
import React, { Component } from "react";
import NumberFormat from "react-number-format";
import PhoneInputHandler from "./PhoneInputHandler/PhoneInputHandler";
class App extends Component {
state = {
userInput: ""
};
phoneNumberFormatHandler = values => {
console.log(values);
// this.state.userInput.length <= 10 ? this.format="(###) ###-####" : this.format=this.state.userInput.values
};
render() {
return (
<div className="App">
{/* <input type="number"
name="phoneNumberInput"
placeholder='Phone Number Here'
onChange={this.inputChangedHandler}
value={this.state.userInput}/>
format="(###) ###-####"
<p id='PhoneOutput'><strong>Value: </strong>+1{this.state.numAsString}</p>
*/}
<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>
</div>
);
}
}
export default App;
最佳答案
您可以在格式字符串的末尾添加另一个 #
,并检查您的 userInput
的 length
是否小于 11 且仅如果是这样的话,给 NumberFormat
一个 format
属性。
示例
class App extends Component {
state = {
userInput: ""
};
inputChangedHandler = values => {
this.setState({ userInput: values.value });
};
render() {
const { userInput } = this.state;
return (
<div className="App">
<NumberFormat
format={userInput.toString().length < 11 ? "(###) ###-#####" : undefined}
name="phoneNumberInput"
placeholder="Phone Number Here"
onValueChange={this.inputChangedHandler}
value={userInput}
/>
<p>
<strong>Value: </strong>+1{userInput}
</p>
</div>
);
}
}
关于javascript - react 操纵 NumberFormat 格式以有条件地工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51348517/