javascript - 多个电话号码编辑的逻辑

Question

我的项目中有一个表单，需要保存 4 个电话号码。单击按钮时会显示用于输入电话号码的文本框。实现如下。

添加时--->

• 已进入第一 PH.No
• 单击按钮时，显示第二个文本框。不想输入该值。
• 点击按钮，显示第三个文本框。
• 输入了第三个 PH.NO。
• 保存了包含详细信息的表单。

在编辑相同的表单时，我想要如下--->

• 单击按钮时，显示文本框以输入第二个 PH.No。
• 输入第二个 PH 号。
• 在下一个按钮上，单击显示文本框以输入第 4 个 PH.No。

实际发生的情况是:

编辑时，在 UI 中，不是单击第 4 个 PH.NO ，而是单击第 3 个 PH.No (第 3 个 PH.No 的文本框未显示在那里，但那里发生了该单击的滞后。 )由于 3rd PH.No 已保存，我不想检查它的计数。

我使用 count 来检查这一点。

如何解决这个问题？

     count:this.props.patientInfo.WorkPhone?this.props.patientInfo.MobilePhone?this.props.patientInfo.RelativePhone? this.props.patientInfo.AltPhone1?4:3:2:1:0
         add(e){
         if(this.state.count > 4){
                    this.setState({
                        clickFlag:true,
                        count:0
                    })
                }
            else
            {   this.setState({
                    clickFlag:true,
                    count:this.state.count+1
                })}}
render()
{const inputs =[
            {'WorkPhone':patientInfo.WorkPhone?patientInfo.WorkPhone:'',
            'MobilePhone':patientInfo.MobilePhone?patientInfo.MobilePhone:'',
            'RelativePhone':patientInfo.RelativePhone?patientInfo.RelativePhone:'',
            'AltPhone1':patientInfo.AltPhone1?patientInfo.AltPhone1:'',
            'AltPhone2':patientInfo.AltPhone2?patientInfo.AltPhone2:'',
            'AltPhone3':patientInfo.AltPhone3?patientInfo.AltPhone3:'',
            'AltPhone4':patientInfo.AltPhone4?patientInfo.AltPhone4:'',
            'AltPhone5':patientInfo.AltPhone5?patientInfo.AltPhone5:''}
        ]
        return(
        <div className="dashboard-patients-details_row">
                                <div className="dashboard-patients-details_row_key" title="Phone">
                                    Phone
                                </div>
                                <div className="dashboard-patients-details_row_valuePhone">
                                    <Field name="HomePhone" onInput={this.onCheckInput} maxLength="10" 
                                    pattern="\d*" component="input" type="text" onChange={()=> this.onEnablePhone("Home")} placeholder="HomePhone" style={{"width":"117px"}} title={' Home Phone: ' + this.formatPhoneNumber(patientInfo.HomePhone)}/>

                                     {patientDetailsForm && patientDetailsForm.values && !patientDetailsForm.values.HomePhoneDisabled &&
                                        <Field name="HomePhoneDisabled" component={Checkbox} />
                                    }
                                    {patientDetailsForm && patientDetailsForm.values && patientDetailsForm.values.HomePhoneDisabled &&
                                        <div className="dashboard-patients-details_phone-disabled"
                                     onClick={()=> this.onEnablePhone("Home")}><div className="dashboard-patients-details_phone-disabled_label">X</div></div>
                                    }
                                    {!patientInfo.HomePhone || (!patientInfo.WorkPhone && patientDetailsForm && patientDetailsForm.values&& !patientDetailsForm.values.WorkPhone) || (!patientInfo.MobilePhone && patientDetailsForm && patientDetailsForm.values&&!patientDetailsForm.values.MobilePhone ) ||
                                    (!patientInfo.RelativePhone   && patientDetailsForm && patientDetailsForm.values&&!patientDetailsForm.values.RelativePhone)|| (!patientInfo.AltPhone1 && patientDetailsForm && patientDetailsForm.values&&!patientDetailsForm.values.AltPhone1)
                                    || (!patientInfo.AltPhone2 && patientDetailsForm && patientDetailsForm.values &&!patientDetailsForm.values.AltPhone2)||(!patientInfo.AltPhone3 && patientDetailsForm && patientDetailsForm.values&&!patientDetailsForm.values.AltPhone3)|| 
                                    (!patientInfo.AltPhone4 && patientDetailsForm && patientDetailsForm.values && !patientDetailsForm.values.AltPhone4 )|| (!patientInfo.AltPhone5 && patientDetailsForm && patientDetailsForm.values&&!patientDetailsForm.values.AltPhone5 )?
                                      <div>  <button title="add" className="dashboard-patients-details_addicn" onClick={this.add} style={{'cursor':'pointer',"marginLeft":"5px"}}>               
                                    <PhoneAdd/> </button>
                                     </div> :''
                                    }
                                </div>

                            </div>
     {this.state.clickFlag && this.state.count<=4?
     inputs && inputs.map((node,index) => 
           this.state.count=== 1 && !patientInfo.WorkPhone && patientDetailsForm && patientDetailsForm.values && patientDetailsForm.values.WorkPhone.length<10 ?
                                 <div className="dashboard-patients-details_row">
                                 <div className="dashboard-patients-details_row_key1"> </div>
                                 <div className="dashboard-patients-details_row_valuePhone">
                                 <Field name="WorkPhone" component="input" onInput={this.onCheckInput} placeholder="WorkPhone"
                                     maxLength="10" type="text"  onChange={()=> this.onEnablePhone("Work")} />
                                    {patientDetailsForm && patientDetailsForm.values && !patientDetailsForm.values.WorkPhoneDisabled &&
                                        <Field name="WorkPhoneDisabled" component={Checkbox} />
                                    }
                                    {patientDetailsForm && patientDetailsForm.values && patientDetailsForm.values.WorkPhoneDisabled &&
                                        <div className="dashboard-patients-details_phone-disabled"
                                     onClick={()=> this.onEnablePhone("Work")}><div className="dashboard-patients-details_phone-disabled_label">X</div></div>
                                    }  
                                 </div>
                                 </div> :
      this.state.count === 2 && !patientInfo.MobilePhone && patientDetailsForm && patientDetailsForm.values && patientDetailsForm.values.MobilePhone.length<10 ?
                                 <div className="dashboard-patients-details_row">
                                 <div className="dashboard-patients-details_row_key1"> </div>
                                 <div className="dashboard-patients-details_row_valuePhone">
                                 <Field name="MobilePhone" maxLength="10" onInput={this.onCheckInput} placeholder="MobilePhone"
                                    component="input" type="text"  onChange={()=> this.onEnablePhone("Mobile")} />
                                    {patientDetailsForm && patientDetailsForm.values && !patientDetailsForm.values.MobilePhoneDisabled &&
                                        <Field name="MobilePhoneDisabled" component={Checkbox} />
                                    }
                                    {patientDetailsForm && patientDetailsForm.values && patientDetailsForm.values.MobilePhoneDisabled &&
                                        <div className="dashboard-patients-details_phone-disabled"
                                     onClick={()=> this.onEnablePhone("Mobile")}><div className="dashboard-patients-details_phone-disabled_label">X</div></div>
                                    } 
                                 </div>
                                 </div>:
     this.state.count === 3 && !patientInfo.RelativePhone && patientDetailsForm && patientDetailsForm.values && patientDetailsForm.values.RelativePhone.length<10?
                                 <div className="dashboard-patients-details_row">
                                 <div className="dashboard-patients-details_row_key1"> </div>
                                 <div className="dashboard-patients-details_row_valuePhone">
                                 <Field name="RelativePhone" onInput={this.onCheckInput} maxLength="10" placeholder="RelativePhone"
                                     component="input" type="text"  onChange={()=> this.onEnablePhone("Relative")} />
                                    {patientDetailsForm && patientDetailsForm.values && !patientDetailsForm.values.RelativePhoneDisabled &&
                                        <Field name="RelativePhoneDisabled" component={Checkbox} />
                                    }
                                    {patientDetailsForm && patientDetailsForm.values && patientDetailsForm.values.RelativePhoneDisabled &&
                                        <div className="dashboard-patients-details_phone-disabled"
                                     onClick={()=> this.onEnablePhone("Relative")}><div className="dashboard-patients-details_phone-disabled_label">X</div></div>
                                    } 
                                 </div>
                                 </div>:................................)
}

这是我的代码

Answer 1

好的，那么你可以用另一种方法来处理这个问题。如果我正确理解您的问题，这里是解决方案:

假设:对于每个表单

1- 为输入创建一个状态；

this.state={
            WorkPhone: patientInfo.WorkPhone?patientInfo.WorkPhone:'',
            MobilePhone: patientInfo.MobilePhone?patientInfo.MobilePhone:'',
            RelativePhone: patientInfo.RelativePhone?patientInfo.RelativePhone:'',
            AltPhone1: patientInfo.AltPhone1?patientInfo.AltPhone1:'',
            AltPhone2: patientInfo.AltPhone2?patientInfo.AltPhone2:'',
            AltPhone3: patientInfo.AltPhone3?patientInfo.AltPhone3:'',
            AltPhone4: patientInfo.AltPhone4?patientInfo.AltPhone4:'',
            AltPhone5: patientInfo.AltPhone5?patientInfo.AltPhone5:''
            }

2-然后使用antd表单将输入与这些可能的值关联起来(我强烈建议您使用组件库或使您的代码比这更可读):

<Form.Item>
    {getFieldDecorator(`WorkPhone`)(
      <Input placeholder="Phone Number" style={{ width: '60%', marginRight: 8 }} />
    )}
  </Form.Item>
<Form.Item>
    {getFieldDecorator(`WorkPhone`)(
      <Input placeholder="Phone Number" style={{ width: '60%', marginRight: 8 }} />
        )}
</Form.Item>
// continue for all phone numbers in state

现在，当您提交并关注antd forms时在文档中，您最终可以检查哪些电话号码已给出，哪些未给出，以便显示该字段。

3-您可以通过使用此类功能得到一个想法

add = () => {
  const { form } = this.props;
  const keys = form.getFieldValue('keys');
  const nextKeys = keys.concat(id++);
  form.setFieldsValue({
    keys: nextKeys,
  });
}

附:This正如 @Dhaval 提到的，这是一个很好的例子，