Question

我正在使用 React。

这是我的代码：

import React from 'react';
import { Form, Button } from 'react-bootstrap';

class SomeComponent extends React.Component{
    constructor(props){
       super(props);
       this.state = {
          showElement: false,
          errorMessage: ""
       };
    }


     onBTNClick = () =>{
         return(
           <Form.Group>
               <Form.Label>Password</Form.Label>
               <Form.Control type="text" />
           </Form.Group>
         );
      }


     changeStateToTrue = () =>{
        this.setState({showElement: true});
     }


    render = () =>{
       return(
          <Form>
             { this.state.showElement === true ? this.onOTPClick : null}
             <Button type="submit" onClick={() => this.changeStateToTrue}>Show Field</Button>
          <Form>
        );
    }

}

我的问题：

我希望在单击“显示字段”按钮时显示密码字段 (Form.Group) 吗？

上述方法有什么问题？

谢谢。

Answer 1

您应该对 changeStateToTrue 进行编辑：

 this.setState(prevState => ({
      showElement: !prevState
    }));

并有条件地渲染它

   { this.state.showElement === true ? this.onBTNClick : null}

有条件地显示/隐藏项目

1 个答案: