Question

我是ReactJS的新手，我正在尝试构建一个简单的Web应用程序来启动。我创建了两个组件：1.Menu.jsx 2.ImgUrl.jsx。我希望用户单击“菜单组件”中的菜单按钮，然后触发ImgUrl组件。但是，当我进行测试时，ImgUrl组件将显示并立即消失。谁能给我一些最佳实践的建议？非常感谢。这是代码：

import React from 'react';
import ImgUrl from './ImgUrl';
import { Button, Grid, Row, Col } from "react-bootstrap";

var $=require('jquery');

export default class Menu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: ' '};

        this.handleChange = this.handleChange.bind(this);
        this.handleOption = this.handleOption.bind(this);
      }

      handleChange(val) {
        this.setState({value: val});
        //console.log(val);
        this.handleOption(val);
      }

      handleOption(val){
        if(val=='ads'){
          //console.log(val);
          $.get(window.location.href + 'Xxx', (data) => {  
            //console.log(data);     
            this.setState({value: data}); 
          });

        }

      }

      render() {
        const token = this.state.value;
        console.log(token);
        let test;
        if (token == 'ads'){
          test = <ImgUrl/>;
        }
        return (
            <Col>
              <ul>
                <li onClick={this.handleChange.bind(this,"ads")} >Import Ads Weekly Report</li>
                <li onClick={this.handleChange.bind(this,"bs")} >Import BS Weekly Report</li>
                <li onClick={this.handleChange.bind(this,'adskpi')}>Import Ads KPI Report</li>
                <li onClick={this.handleChange.bind(this,'importkpi')}>Build Ads Market Report</li>
                <li onClick={this.handleChange.bind(this,'adsMarket')}>Build Non Ads KPI Report</li>
                <li onClick={this.handleChange.bind(this,'nonAdsMarket')}>Build Non Ads Market Report</li>
              </ul>
              <h2 class="selectOption">You just select: {this.state.value}</h2>
              <div class="select-folder"> 

                    {test}
              </div>
            </Col>
        );
      }
}

Answer 1

handleOption中console.log（data）的输出是什么？

您的handleOption可能会将状态中的值设置为与“ ads”不同的值。它将导致

的重新呈现，并且如果value =='ads'，则仅显示，因此它消失了。

ReactJS在if-else条件语句中调用其他组件

1 个答案: