如何调整这个切片并替换React

Question

我试图通过js设置输入的最大长度，因为我需要这样做，而且在某种程度上它已经起作用了，我需要它用逗号打印，但不需要计数，这是我的代码：

<input  onInput={ (evt) => this.handleChange(evt)} />

如果最大长度是8，那么在我按下8个数字之前，它会像这样打印我：12222222但如果我再按一个数字，8仍然保留，但格式已损坏，打印如下：12222222

private handleChange(evt) {
evt.target.value=evt.target.value.replace(/,/g,"").slice(0, this.maxLength)
const element = evt.target ? evt.target.value : '';
if (this.type == 'decimal') {
const value= this.formatDecimal(element,this.maxLength, this.maxDecimals, this._separatorDecimal, this.separator);
}
}

formatDecimal(input, maxLength, maxDecimals, separator, separatordigit) {
var input_val = input;
if (input_val === separator) {
input_val = '';
}
input_val = this.formatNumber(input_val, maxLength, separatordigit);
input_val = "" + input_val;
}
return input_val;
}

我希望你能帮助我，谢谢

Answer 1

当我控制输入并使值成为组件状态的一部分时，逻辑似乎正在工作。

需要注意的主要事项有：

您不应该直接更改输入的值。这可能会引发一些问题。

您应该对值进行更改，这些更改希望与组件状态中的DOM相关，而不是与组件属性相关。属性不会导致组件重新渲染并同步到dom。

class Example extends React.Component {
maxLength = 14;
type = 'decimal';
state = { value: '' };
separator = ','
handleChange = (ev) => {
const element = ev.target.value.replace(/,/g,'').slice(0,this.maxLength);
if (this.type == 'decimal') {
this.setState({value:this.formatDecimal(
element,
this.maxLength,
this.maxDecimals,
this._separatorDecimal,
this.separator
)});
}
};
formatDecimal(input, maxLength, maxDecimals, separator, separatordigit) {
var input_val = input;
if (input_val === separator) {
input_val = '';
}
input_val = this.formatNumber(input_val, maxLength, separatordigit);
input_val = '' + input_val;
return input_val;
}
formatNumber(n, maxLength, separator) {
n = n.replace(/D+/g, '');
n = n.substring(0, maxLength);
// format number 1000000 to 1,234,567
return n.replace(/D+/g, '').replace(/B(?=(d{3})+(?!d))/g, separator);
}
render() {
return (
<div>
<input value={this.state.value} onChange={this.handleChange} />
</div>
);
}
}
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"/>