Ph

Ph

关注
发信
关注(28)粉丝(399)

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

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

在添加时--->


输入第一个PH.No
单击按钮后，显示第二个文本框。不想输入值。
单击按钮，显示第三个文本框。
输入第三个PH.NO.
保存了带有详细信息的表格。


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


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


实际发生的是：

在编辑时，在UI中而不是单击第4个PH.NO，而是单击第3个PH.No（没有显示第3个PH.No的文本框，但在那里出现了单击延迟）。 PH.No已经保存，我不想检查它的计数。

我用数来检查。

我该如何解决这个问题？

     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>:................................)
}


这是我的代码

最佳答案

好的，因此您可以使用另一种方法来解决此问题。如果我正确理解您的问题，请使用以下解决方案表格：

假设：每种形式

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 forms将输入与这些可能的值关联（我强烈建议您使用组件库或使代码更具可读性）：

<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提到的一个很好的例子，

关于javascript - 多个电话号码的编辑逻辑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55335637/

10-13 02:21
Powered by LMLPHP ©2024 Ph 0.031314