javascript - react : Save multiple similar inputfields in one state

Question

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

我使用的 UI 库是 Material-UI，我使用 React-Text-Mask 库作为我的 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>

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

我想要实现的目标: 我想要有一种状态和一种处理方法来处理所有三个字段(将来可能有更多字段)。或者比我现在拥有的更好的东西。所以将来，如果我必须添加更多字段，我不必每次都修改状态并添加新方法。

到目前为止我已经尝试过 我尝试将数组测试掩码作为状态。问题是因为我使用 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 方法，您需要绑定(bind)索引“i”。

我写了“this.state.textmasks[i]”和“this.handlePhoneNumber.bind(this, i)”，只是因为我假设你的实现取决于电话号码输入索引(不仅存储到适当的地方，但也要做一些额外的逻辑)。

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

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

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