onClick изменить отображение на двух разных кнопках (React.js)

Question

Я пытался открыть дочерний Textura.js, показывая результаты onClick в родительском Sofa.js. Мне удается отображать ничего или блокировать в зависимости от состояния, в котором он был раньше, но теперь мне нужно, чтобы я также мог отображать ничего в файле Textura.js по щелчку кнопки дочернего файла. Кстати, игнорируйте код HideTextura, потому что это была просто попытка, не работает.

Sofa.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>
                );

    }

}

Textura.js код, только важный для этого вопроса:

export class Textura extends React.Component {

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

    HideTextura = () => {
        const { display } = this.state;
        this.setState(prev => ({
            display: !display
        }));

    };

    render() {

        const { display } = this.state;

            return (
                <div style={{ display: display }} >
                    <button onClick={this.HideTextura}>
                        <img src="../../ic/icon-fechar.svg" alt="Fechar Módulo" id="OptionsClose" />
                    </button>

                    <div id="Options">

             /* content */

                    </div>
                </div>
            );

    }
}

Answer 1

Я не совсем понял, чего вы пытаетесь достичь. Это то, что вы пытаетесь сделать?

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;

textura.js

const Textura = ({handler}) => (
   <button onClick={handler} / >
)

Answer 2

display:false и display:true это правильно в css ???

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

надеюсь, что это поможет

Answer 3

Просто переместите функцию 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>
        );

    }
}