Question

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

添加--->

输入了第一个PH编号
单击按钮，显示第二个文本框。不想输入值。
单击按钮，显示第三个文本框。
输入了第三个电话号码
保存了带有详细信息的表格。

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

单击按钮，显示用于输入第二个PH编号的文本框。
输入了第二个PH号。
在下一个按钮上，单击显示文本框以输入第四个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>:................................)
}

这是我的代码

Answer 1

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

假设：对于每种表格

1-设置输入状态； </ p>

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,
  });
}

P.S：This是一个很好的示例，如@Dhaval所述，

多个电话号码的编辑逻辑

1 个答案: