Question

我在我的react应用程序上创建了一个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。

我应该如何更改LogOutButton组件，以便它将用户重定向到google.com？
如何在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>
    );
  }
}

我知道在render（）中写这行是错误的

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

但是我不知道如何使LogOutButton组件正常工作。

谢谢。

Answer 1

在您的注销组件中添加onLogout属性，并在单击按钮时调用它。

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属性，以便在单击按钮时调用该传递的函数。

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>
    );
  }

在React js中使用新组件

1 个答案: