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作为我的掩码库。它只接受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甚至不依赖于状态/索引（最有可能是你的业务案例）和phoneNumbers将在onChange触发器（handlePhoneNumber方法）中处理，它将索引作为第一个参数，因此它可以更新适当的phoneNumbers索引。