Question

我有三个相同的输入字段，这些字段被屏蔽为具有电话格式的文本。所有输入字段都完全相同（电话输入字段）。现在，我具有三个状态，并具有三个handlePhoneNumber方法。这不是一个好习惯，因为所有这些字段基本上都完全相同。

我使用的UI库是Material-UI，而我使用的React-Text-Mask库是我的遮罩组件。

到目前为止我所拥有的：

this.state = {
    textmask: "(   )    -    ",
    textmask2: "(   )    -    ",
    textmask3: "(   )    -    ",
}

RenderTextMask(props){
    const { inputRef, ...other } = props;
    return (
      <MaskedInput
        {...other}
        ref={inputRef}
        mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
        guide={true}
        showMask
      />
    );
}

我的OutlienInput组件（来自material-UI），看起来像这样：

        <div>
            <FormLabel>Phone</FormLabel>
            <div>
                <OutlinedInput
                    value={this.state.textmask}
                    onChange={this.handlePhoneNumber}
                    inputComponent={this.RenderTextMask}
                    labelWidth={200}
                />
            </div>
        </div>
        <div>
            <FormLabel>Phone</FormLabel>
            <div>
                <OutlinedInput
                    value={this.state.textmask2}
                    onChange={this.handlePhoneNumber2}
                    inputComponent={this.RenderTextMask}
                    labelWidth={200}
                />
            </div>
        </div>
        <div>
            <FormLabel>Phone</FormLabel>
            <div>
                <OutlinedInput
                    value={this.state.textmask3}
                    onChange={this.handlePhoneNumber3}
                    inputComponent={this.RenderTextMask}
                    labelWidth={200}
                />
            </div>
        </div>

问题所在： 到目前为止，我需要为每个电话领域提供一种状态和一种处理方法。如您所见，随着应用程序的增长，该代码实际上是不可维护的。

我要实现的目标： 我想要一种状态和一个处理所有三个字段（将来可能会有更多字段）的handle方法。还是比我现在拥有的更好的东西。因此，将来，如果我必须添加更多字段，则不必每次都修改状态并添加新方法。

到目前为止我尝试过的事情 我试图将数组testmask作为状态。问题在于，由于我使用react-text-mask作为掩码库。它只接受String。如果将“ textmask”更改为字符串数组，则会提示错误。

Answer 1

稍作猜测，我会说数组是自然的方法。只有一部分代码，我可能错了。

IMO，您可以执行以下操作：

this.state = {
    textmasks: ["(   )    -    ", "(   )    -    ", "(   )    -    "]
}

您已经提到过。现在，在您的渲染方法中，如下所示：

const phoneInputs = [];
for (let i = 0; i < 3; i++) {
       phoneInputs.push(<div key={i}>
            <FormLabel>Phone</FormLabel>
            <div>
                <OutlinedInput
                    value={this.state.textmasks[i]}
                    onChange={this.handlePhoneNumber.bind(this, i)}
                    inputComponent={this.RenderTextMask}
                    labelWidth={200}
                />
            </div>
        </div>);
}

因此，要执行此操作，请使用this.state.textmasks [i]（输入索引）来捕获适当的掩码。另外，要绑定this.handlePhoneNumber方法，您需要绑定索引“ i”。

我写了“ this.state.textmasks [i]”和“ this.handlePhoneNumber.bind（this，i）”，只是因为我假设您的实现取决于电话号码输入索引（不仅存储在适当的位置），但还需要执行一些其他逻辑。）

如果您仅使用一个文本掩码并且仅存储电话号码列表（我假设在handlePhoneNumber方法中），那么您很可能应该具有：

const textMask = "(   )    -    ";
this.state = {
    phoneNumbers: []
};

这样，textMask甚至不依赖于状态/索引（很可能是您的业务案例），并且将在将索引作为第一个参数的onChange触发器（handlePhoneNumber方法）中处理phoneNumbers，因此它可以更新适当的phoneNumbers索引。

反应：将多个相似的输入字段保存为一种状态

1 个答案: