используя новый компонент с реагировать JS - PullRequest
Новая
       11

используя новый компонент с реагировать JS

0 голосов
/ 28 октября 2018

Я создал компонент кнопки LogOut над моим приложением реакции.

Вот как это выглядит: 

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';

 export class LogOutButton extends Component {
  static contextTypes = {
    store: PropTypes.object.isRequired,
  };

  handleClick = () => {
    this.context.store.dispatch();
  };

  render() {
    return <button type="button" onClick={this.handleClick}>Logout</button>;
  }
}

Все, что я хочу сделать, - это использовать этот компонент внутри index.js так, чтобы при нажатии пользователем кнопки «Выход из системы» он получал указаниена www.google.com.

  1. Как изменить компонент LogOutButton, чтобы он перенаправлял пользователя на google.com?

  2. Какя должен использовать компонент внутри index.js?

Это мой index.js: 

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { LogOutButton } from './components/LogOutButton.js';

class Home extends React.Component {
  displayName = Home.name;

  state = {
    result: 0,
    val1: 0,
    val2: 0,
  };

  handleChangeOne = event => {
    this.setState({ val1: event.target.value });
  };

  handleChangeTwo = event => {
    this.setState({ val2: event.target.value });
  };

  add = () => {
    this.setState({ 
      result: parseInt(this.state.val1) + parseInt(this.state.val2)
    });
  };

  render() {
    return (
      <div>
        <h1>Hello world! The result is: {this.state.result}</h1>
        <input type="text" onChange={this.handleChangeOne} />
        +
        <input type="text" onChange={this.handleChangeTwo} />
        = <br />
        <button onClick={this.add}>Add</button>
        <br/><br/> 
        <button onClick={LogOutButton}>Log Out</button> 
      </div>
    );
  }
}

Я знаю, что неправильно писать эту строку внутри рендера() 

<button onClick={LogOutButton}>Log Out</button>

Однако я не знаю, как заставить компонент LogOutButton работать.

Заранее спасибо.

1 Ответ

0 голосов
/ 28 октября 2018

Добавьте onLogout prop к вашему компоненту Logout и вызывайте его при нажатии кнопки.

export class LogOutButton extends Component {
  static contextTypes = {
    store: PropTypes.object.isRequired,
  };

  handleClick = () => {
    this.context.store.dispatch();
    this.props.onLogout();
  };

  render() {
    return <button type="button" onClick={this.handleClick}>Logout</button>;
  }
}

Затем в вашем index.js передайте функцию в onLogout prop, чтобы переданная функция вызывалась при нажатии кнопки. 

onLogoutClick = ()=>{
    window.location.href = 'https://www.google.com';
  }

  render() {
    return (
      <div>
        <h1>Hello world! The result is: {this.state.result}</h1>
        <input type="text" onChange={this.handleChangeOne} />
        +
        <input type="text" onChange={this.handleChangeTwo} />
        = <br />
        <button onClick={this.add}>Add</button>
        <br/><br/> 
        <LogOutButton onLogout={this.onLogoutClick} />>
      </div>
    );
  }
...