使用 formatter.js 时，React onChange 不会在文本输入上触发答案

【问题标题】：React onChange doesn't fire on text input when formatter.js is used使用 formatter.js 时，React onChange 不会在文本输入上触发
【发布时间】：2019-12-09 23:36:21
【问题描述】：

我正在使用formatter.js 来格式化一些输入框。我想将此格式化程序连接到我的反应应用程序，所以我编写了一个简单的模块，但 onChange 函数不会触发。当我删除格式化程序库时，输入框按计划工作。但我想格式化输入并使用我的 React 应用程序中的值。

在互联网上进行简短搜索后，我遇到了这个问题；React: trigger onChange if input value is changing by state? 但我不确定如何将该解决方案应用于我的应用程序。

ReactMaskedInput.js

import React, { Component } from 'react'

class ReactMaskedInput extends Component {
    constructor(props) {
        super(props)
        this.onChangeHandler = this.onChangeHandler.bind(this)
        this.state = {
            value: ""
        }
    }

    onChangeHandler(event) {
        this.setState({
            value: event.target.value
        })
        alert(this.state.value)
    }

    componentDidMount() {
        let dataMask = this.props.dataMask
        window.$(`#${this.props.id}`).formatter({
            pattern: dataMask
        });
    }

    render() {
        return (
            <div >
                <h3>
                    <b>{this.props.header}</b>
                </h3>
                <input
                    id={this.props.id}
                    type="text"
                    placeholder={this.props.placeHolder}
                    className="form-control"
                    onChange={event => this.onChangeHandler(event)}
                    name={this.props.name}
                >
                </input>
            </div>
        )
    }
}

export default ReactMaskedInput

Index.js

ReactDOM.render(<ReactMaskedInput
    id="myMaskedInput"
    header="Masked Input Phone"
    onChange={(event) => { deneme(event); }}
    dataMask={"({{999}}) {{999}}-{{9999}}"}
    name="maskedInput1"
    placeHolder="Please enter a valid phone number"
    validationInitiatorNr={10}
// onChange={(phoneNr) => validatePhone(phoneNr)}
/>, document.getElementById('myFormattedInput'))

【问题讨论】：

你使用它就像 Jquery 使用它一样，它不好。我向您推荐那些旨在用于反应的库。在您的情况下，这可能会对您有所帮助：github.com/s-yadav/react-number-format
好建议，但我需要坚持使用名为 Limitless 的样式库来设置元素样式
你可以保持无限，因为它看起来是css library。但是对于您的js libraries，您需要使用反应准备好的库。
由于您没有工作演示，我认为正在发生的事情是：格式化程序 js 将它自己的 onChange 处理程序放在输入上，这就是它可以格式化内部值的方式。在react里面引入jquery一般不好，但是既然你这样做了，大概就是这样吧。如果可以的话，在codesandbox或其他地方做一个工作演示，我会看看。

标签： javascript reactjs

【解决方案1】：

修复您的 onChangeHandler 代码

您必须在 ReactMaskedInput 类的代码中显式调用作为属性传递的“onChange”处理程序。我猜你假设它会被自动调用。请注意，ReactMaskedInput 是您创建的组件，而不是 React 调用的 HTML 标记“onChange”。

onChangeHandler(event) {
    this.setState(() => ({
       value: event.target.value
    }), () => {
       this.props.onChange(event) // Call 'onChange' here
       alert(this.state.value) // alert should be inside setState callback
    })
}

【讨论】：

对不起，还是一样。我已经相应地更改了代码。当我更改框中的值时，它仍然没有调用 onChangeHandler 函数