Question

我试图通过在父Sofa.js中显示onClick结果来打开子Textura.js。我设法根据之前的状态不显示任何内容或阻止显示任何内容，但现在我需要使子文件上的按钮的Click上的Textura.js文件也不显示任何内容。顺便说一句，请忽略HideTextura代码，因为这只是一个尝试，无法正常工作。

Sofa.js 文件，仅重要代码：

blocks

Textura.js 代码，仅对以下问题重要：

const textura = <Textura />;

export class Sofa extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            display: false
        };
    }

    state = {
        showResults: false
    };

    showTextura = () => {
        const { grayscale1 } = this.state;
        this.setState(prev => ({
            showTextura: !prev.showTextura,
        }));
    }

    render() {

                return (
                    <div id="Sofa">

                        <div id="SpecCentro">
                             <img src="../../../ic/icon-tecido-azul.svg" className="Specs" onClick={this.showTextura} alt="Tecido" />
                        </div>

                        {this.state.showTextura ? textura : null}
                    </div>
                );

    }

}

Answer 1

只需将HideTextura函数从Textura移到Sofa组件，然后将它作为道具传递到Textura组件：

我将其重命名为toggleTexture，并对代码进行了一些重构：

Sofa.js文件

import Textura from '/path/to/Textura.js';    
export class Sofa extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            showTextura: false
        };
    }

    toggleTextura = () => {
        const { showTextura } = this.state;
        this.setState({
            showTextura: !showTextura,
        });
    }

    render() {
        const { showTextura } = this.state;
        return (
            <div id="Sofa">

                <div id="SpecCentro">
                     <img src="../../../ic/icon-tecido-azul.svg" className="Specs" onClick={this.toggleTextura} alt="Tecido" />
                </div>

                {showTextura ? <Textura toggleTextura={this.toggleTextura} /> : null}
            </div>
        );

    }

}

Textura.js代码

export default class Textura extends React.Component {

    render() {
        const { toggleTextura } = this.props;
        return (
            <div>
                <button onClick={toggleTextura}>
                    <img src="../../ic/icon-fechar.svg" alt="Fechar Módulo" id="OptionsClose" />
                </button>

                <div id="Options" onClick={toggleTextura}>

                </div>
            </div>
        );

    }
}

Answer 2

我不太了解您要达到的目标。这是您要尝试的吗？

window.onbeforeunload = confirmExit;

function confirmExit() {
    return "You have attempted to leave this page. Are you sure?";
}

textura.js

class Sofa extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
  }

  toggleTextura = () => {
    this.setState(previousState => ({
      show: !previousState.show
    }))
  }


  render() {
    return (
      <div>
        <img src="con-tecido-azul.svg" className="Specs" onClick={this.toggleTextura} />
        {
          this.state.show ? <Textura handler={this.toggleTextura} />
        }
      </div>
    );
  }

}
export default Sofa;

Answer 3

display:false和display:true在CSS中正确吗？

style={(this.state.display===true ? {display:block} :{display:none})}

希望这会有所帮助

onClick更改显示在两个不同的按钮上（React.js）

3 个答案: