React：在一种状态下保存多个相似的输入字段

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>

问题是什么： 到目前为止，对于我拥有的每个电话字段，我都需要一种状态和一种处理方法。如您所见，随着应用程序的增长，代码实际上是不可维护的。

我想要达到的目标： 我想要一种状态和一种处理所有三个字段的句柄方法（将来可能会有更多字段）。或者比我目前拥有的更好的东西。所以以后如果我要添加更多的字段，我不必每次都修改状态和添加新方法。

到目前为止我所尝试的 我试图将数组 testmask 作为状态。问题是因为我使用react-text-mask 作为我的掩码库。它只接受字符串。如果我把“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 甚至不会依赖于状态/索引（很可能是您的业务案例），并且 phoneNumbers 将在 onChange 触发器（handlePhoneNumber 方法）中处理，该触发器将索引作为第一个参数，因此它可以更新适当的 phoneNumbers索引。