javascript - 使用 formatter.js 时，React onChange 不会在文本输入时触发

Question

我正在使用 formatter.js格式化一些输入框。我想将此格式化程序连接到我的 react 应用程序，因此我编写了一个简单的模块，但 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'))

Answer 1

Fix your onChangeHandler code

您必须显式调用在 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
    })
}