當使用formatter.js時，React onChange不會在文本輸入上觸發

Question

我正在使用formatter.js格式化某些輸入框。 我想將此格式化程序連接到我的react應用程序，因此我編寫了一個簡單的模塊，但是onChange函數不會觸發。 當我刪除格式化程序庫時，輸入框將按計划工作。 但是我想格式化輸入，並在我的React應用程序中使用值。

在互聯網上進行簡短搜索后，我遇到了這個問題。 反應：如果輸入值按狀態變化，則觸發onChange嗎？ 但是我不確定如何將該解決方案應用於我的應用程序。

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

修復您的onChangeHandler代碼

您必須顯式調用作為屬性傳遞的“ onChange”處理程序，該處理程序在ReactMaskedInput類的代碼中。 我猜您假設它會被自動調用。 請注意，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
    })
}