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

修复您的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
    })
}

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

1 个答案: