ReactJS - Передача состояния от кнопки переключения, чтобы скрыть деление - PullRequest
Новая
       42

ReactJS - Передача состояния от кнопки переключения, чтобы скрыть деление

0 голосов
/ 06 января 2020

В проекте React у меня есть кнопка переключения, которая показывает и скрывает некоторую информацию для пользователя. Теперь я хочу подключить третью часть к переключателю.

Например, при загрузке страницы отображается div, затем нажимается кнопка переключения, а затем я хочу, чтобы это скрылось.

Мне нужно знать, как передать состояние из один компонент к другому, чтобы показать видимость.

Я создал REPL здесь:

https://repl.it/repls/AcceptableLoyalApplicationsuite

Как передать состояние, чтобы узнать, что скрывать / показывать, основываясь на щелчках пользователей ?

Приветствия!

Редактировать:

Поэтому мне нужно проверить состояние, чтобы показать / скрыть компонент. 

if statement or state check to show / hide 
<Component />

1 Ответ

1 голос
/ 06 января 2020

Вы можете определить состояние и функцию в родительском компоненте, как указано ниже, и передать дочерним компонентам.

Просто измените эти два компонента

Приложение. js

class App extends React.Component {
  state = {
    visibility: false
  };
  handleToggleVisibility = () => {
    this.setState(prevState => ({ visibility: !prevState.visibility }));
  };
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Test />
          <Button
            visibility={this.state.visibility}
            handleToggleVisibility={this.handleToggleVisibility}
          />
        </header>
      </div>
    );
  }
}

Кнопка. js

 export default class Button extends Component {
  render() {
    return (
      <div>
        <em>I have another Div with the className of iNeedToHide</em>
        <br />
        <button onClick={this.props.handleToggleVisibility}>
          {this.props.visibility ? "Hide details" : "Show details"}
        </button>
        {this.props.visibility && (
          <div>
            <p>
              Hey. These are some details you can now see! When you see me the
              div above called iNeedToHide needs to be hidden! But how?! How do
              I pass that state?!
            </p>
          </div>
        )}
      </div>
    );
  }
}

Живая демонстрация вашего рабочего кода Живая

...