React 的 Text-Mask 库可以与 Redux 一起使用吗？答案

【问题标题】：Does Text-Mask library of React work with Redux?React 的 Text-Mask 库可以与 Redux 一起使用吗？
【发布时间】：2020-04-15 15:57:53
【问题描述】：

我有一个 React 项目，使用一个名为 Text-mask 的输入掩码库。

我想使用被屏蔽的电话号码值通过 Redux 更新反应状态值。

但是每当我尝试使用 setClientPhone 操作时，被屏蔽的输入只接受一个字母，然后看起来就坏了。

这是我的代码。

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { setClientPhone } from '../../redux/tab/tab.actions';

import MaskedInput from 'react-text-mask';

const MyComponent = (props) => {
    const {clientPhone, setClientPhone} = props;

    const handleChangePhone = e => {
        setClientPhone(e.target.value);
    }

    const TextMaskCustom = (props) => {
        const { inputRef, ...other } = props;
        return (
            <MaskedInput
               {...other}
               ref={ref => {
                   inputRef(ref ? ref.inputElement : null);
               }}
               mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/]}
               placeholderChar={'\u2000'}
               showMask
            />
        );
    }

    return (
        <Input
            value={clientPhone}
            onChange={handleChangePhone}
            id="clientPhone"
            inputComponent={TextMaskCustom}
        />
    );
}


const mapDispatchToProps = dispatch => ({
    setClientPhone: comp => dispatch(setClientPhone(comp)),
})

const mapStateToProps = state => ({
    clientPhone: state.comp.clientPhone,
})

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

有没有办法让它工作？

提前致谢

【问题讨论】：

标签： javascript reactjs redux jsx text-mask

【解决方案1】：

嵌套组件定义是一个坏主意，因为在每次渲染时都会重新定义，因此每次渲染都会安装一个新组件。在MyComponent 之外定义您的TextMaskCustom 组件：

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { setClientPhone } from '../../redux/tab/tab.actions';

import MaskedInput from 'react-text-mask';

const TextMaskCustom = (props) => {
        const { inputRef, ...other } = props;
        return (
            <MaskedInput
               {...other}
               ref={ref => {
                   inputRef(ref ? ref.inputElement : null);
               }}
               mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/]}
               placeholderChar={'\u2000'}
               showMask
            />
        );
 }

const MyComponent = (props) => {
    const {clientPhone, setClientPhone} = props;

    const handleChangePhone = e => {
        setClientPhone(e.target.value);
    }

    return (
        <Input
            value={clientPhone}
            onChange={handleChangePhone}
            id="clientPhone"
            inputComponent={TextMaskCustom}
        />
    );
}


const mapDispatchToProps = dispatch => ({
    setClientPhone: comp => dispatch(setClientPhone(comp)),
})

const mapStateToProps = state => ({
    clientPhone: state.tab.clientPhone,
})

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

【讨论】：