React类组件切换开关时输入字段不显示的解决方法

• 定义的percentRate输入组件存在语法问题：方法体内编写了JSX片段，但既没有通过return关键字返回内容，也没有使用箭头函数隐式返回的语法格式，哪怕被调用也会返回undefined，无法生成对应DOM。
• percentRate方法仅完成了代码编写，从未在组件渲染流程中被条件触发调用，组件渲染时不会将该方法返回的内容插入页面，因此输入框始终无法展示。
• 现有handleToggle方法更新milestone_based_payment状态的逻辑运行正常，缺失的是状态变化与输入框渲染的关联逻辑。

1. 建立开关状态与输入框渲染的关联逻辑
   在togglePayment方法的返回结构中，根据milestone_based_payment的状态做条件判断，状态为真时调用percentRate方法将输入片段插入DOM流，修改后的代码如下：

   togglePayment=()=>{
       const {milestone_based_payment} = this.state;
       return(
           <div className="payment-toggle-wrapper">
               <img 
                   src={milestone_based_payment ? PRIVATE_SwITCH : PUBLIC_SwITCH} 
                   alt="private-public" 
                   onClick={()=>this.handleToggle()}
                   style={{cursor: "pointer"}}
               /> 
               {/* 新增：根据开关状态条件渲染输入框 */}
               {milestone_based_payment && this.percentRate()}
           </div>
       );
   }
   

2. 修正percentRate方法的语法问题
   补充return关键字，移除方法返回值外层不必要的冗余片段包裹，保证方法调用时能正确返回DOM结构，修正后的代码如下：

   percentRate=()=>{
       return (
           <div className="percent-rate-container">
               <Grid container>
                   <Grid item md={12} lg={12} xs={12}>
                       <div className="percent-rate">PERCENT RATE</div>
                       <div>
                           <InputBase
                               className={`milestone-percent-rate`}
                               autoComplete={"off"}
                               placeholder={"PERCENT RATE"}
                               maxLength="100"
                               value={this.state.percent_rate}
                               onChange={(e)=>{this.handleChange(e, "percent_rate")}}
                           />
                           {
                               this.state.percent_rate_error && (
                                   <div className="input-error-style">{this.state.percent_rate_error}</div>
                               )
                           }
                       </div>
                   </Grid>
               </Grid>
           </div>
       )
   }
   

3. 效果验证
   • 点击开关触发handleToggle更新状态后，组件会自动触发重渲染
   • 开关状态为true时，percentRate方法被执行，对应的输入框会展示在开关下方
   • 开关状态为false时，条件判断不成立，输入框会从DOM中移除

• 渲染类方法时必须带调用括号：若代码写为{milestone_based_payment && this.percentRate}，仅会把函数对象本身渲染到页面，不会执行方法返回对应的输入框DOM，必须补充括号写为this.percentRate()才能正常触发方法执行。

内容的提问来源于stack exchange，提问作者Shravani Shinde