Question

这是我的组件（反应），包括重新匹配（重播或重播）按钮。

  render() {
    const rematchTitle = formattedMessage('App.rematch');

    return (
        <div className='modal-footer'>
          <a className='btn'>{rematchTitle}</a>
        </div>
        );
  }

我想给那个按钮点击事件。当用户点击那个（再次重新播放）按钮时我想触发就绪状态（我想在用户点击该按钮时将状态改为准备状态。）因为之前的开发人员开发了就绪状态并且它运行良好（就绪状态有减速器，动作......）。我无法访问以前的开发人员，我是redux的新手。

我尝试将onclick事件提供给该按钮，但是this.props不起作用。我可以绑定或设置this.props吗？我应该添加一个新动作作为名称reMatch 和reducer作为名称reMatch？我应该在哪里设置this.props？在行动？还是reducer？或组件？

 const { onPlayAgain } = this.props;
     let PlayAgain = '';
    const rematchlabel = <FormattedMessage message="app.rematch"/>;
      PlayAgainButton = (
        <a onClick={onPlayAgain } className={buttonStyleClassColored(colorBlue)}> {rematchlabel}</a>
      );

这是我的组件代码

    import $ from 'jquery';
import React from 'react';

import { FormattedMessage } from 'util/IntlComponents';

import OkeyMatchResult from './OkeyMatchResult';

import { RoomState } from 'constants/AppConstants';


function formattedMessage(message) {
  return <FormattedMessage message={message}/>;
}

class OkeyMatchResultDialog extends React.Component {
    componentWillReceiveProps(nextProps) {

    const currentRoomState = this.props.roomState;
    const nextRoomState = nextProps.roomState;




    if (currentRoomState === RoomState.PLAYING
      && nextRoomState === RoomState.END) {

      $('#matchResultModal').openModal({
        opacity: 0.5
      });
    }
  }

  render() {
    const matchEndTitle = formattedMessage('room_title.match_end');
    const rematchTitle = formattedMessage('room_title.rematch');
    const backToLobbyTitle = formattedMessage('room_title.back_tolobby');

    const { matchResult } = this.props;

    let PlayAgainButton = '';
    PlayAgainButton = (
       <a onClick={alert('slm')} > {rematchTitle}</a>
      );

    return (
      <div id='matchResultModal'
           className='matchresult-modal modal modal-fixed-footer'>
        <div className='modal-content'>
          <h4 className='center'>{matchEndTitle}</h4>
          <OkeyMatchResult matchResult={matchResult}/>
        </div>

        <div className='modal-footer'>
          <a className='btn side-by-side'>{backToLobbyTitle}</a>
          <a className='btn'>{PlayAgainButton}</a>
          <a className='btn'>{rematchTitle}</a>
        </div>

      </div>
    );
  }
}

export default OkeyMatchResultDialog;

Answer 1

react-redux库可以轻松添加此功能。它提供了一个connect方法，它返回一个React组件，它包装原始的表示组件，并将可以访问Redux的函数添加到原始组件的props。在下面的代码中，我只注入了单向绑定（React - ＆gt; Redux），但添加相反的方向很简单（查找mapStateToProps的{{1}}参数）。

已编辑的组件（未经测试）：

connect

使用redux in react

1 个答案: