Question

在我的项目中，我将选项按钮的状态保留在redux中。有不同的按钮组，我正在单个功能handleClick中处理其单击动作。但似乎不起作用。我应该为每个按钮组创建一个不同的处理程序吗？谁能建议最好的解决方案？

代码：

import React, { Component } from "react";
import { Button } from "semantic-ui-react";
import { withRouter } from "react-router";
import Answers from "../Answers/Answers";
import { handleClick } from "../../actions/handleClickAction"
import { connect } from 'react-redux'

class Section extends Component {
    handleClick = event => {
        this.props.handleClick(event);
    };

    render() {
        console.log(this.state);

        let styles = {
            width: '50%',
            margin: '0 auto',
            marginBottom: '15px'
        }
        const { history } = this.props;
        const { que1, que2, que3 } = this.state;
        return (
            <>
                <p>1. I was stressed with my nerves on edge.</p>
                <Button.Group widths="5" onClick={this.handleClick} style={styles}>
                    <Answers selected={this.state.que1} style={{ backgroundColor: 'red' }} />
                </Button.Group>
                {` `}
                <p>2. I lost hope and wanted to give up when something went wrong.</p>
                <Button.Group widths="5" onClick={this.handleClick} style={styles}>
                    <Answers selected={this.state.que2} style={{ backgroundColor: 'red' }} />
                </Button.Group>
                {` `}
                <p>3. I feel very satisfied with the way I look and act</p>
                <Button.Group widths="5" onClick={this.handleClick} style={styles}>
                    <Answers selected={this.state.que3} style={{ backgroundColor: 'red' }} />
                </Button.Group>
                <p />
                {` `}
                <Button
                    disabled={!que1 || !que2 || !que3}
                    onClick={() => history.push("/section2", [this.state])}
                >
                    NEXT
        </Button>
            </>
        );
    }
}

export default withRouter(connect(null, { handleClick })(Section));

main.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import store from "./store";
import { Provider } from 'react-redux'

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById("root"));

index.js

import { combineReducers } from "redux";
import selectOptionReducer from "./selectOptionReducer";

export default combineReducers({
  selectOption: selectOptionReducer
})

selectOptionReducer.js

import { SELECT_OPTION } from "../actions/types"

const initialState = {
  que1: "",
  que2: "",
  que3: "",
  que4: "",
  que5: ""
}

export default (state = initialState, action) => {
  switch (action.type) {
    case SELECT_OPTION:
      return {
        ...state,
        que1: action.payload,
        que2: action.payload,
        que3: action.payload,
        que4: action.payload,
        que5: action.payload
      };
    default:
      return state;
  }
}

store.js

import { createStore } from 'redux'
import selectOptionReducer from "./reducers/selectOptionReducer";

const store = createStore(selectOptionReducer);

export default store;

handleClickAction.js

import { SELECT_OPTION } from "./types"

export const handleClick = e => {
  return {
    type: SELECT_OPTION,
    payload: e.target.attributes.getNamedItem("data-key").value
  }
}

输出：

Answer 1

据我所知，reducer会将所有问题的状态设置为每个动作的相同答案。

您需要一种方法来指定要回答的问题。

我将使用类似于以下内容的方法，该方法为每个问题创建一个自定义的onClick处理程序，并将问题ID传递给动作创建者以包含在reducer负载中。然后，reducer使用该ID来仅更新要回答的问题。

（未经测试）

selectOptionReducer.js

export default (state = initialState, action) => {
  switch (action.type) {
    case SELECT_OPTION:
      const { questionId, value } = action.payload;
      return { ...state, [questionId]: value };
    default:
      return state;
  }
}

handleClickAction.js

export const handleClick = ({ questionId, e }) => {
  return {
    type: SELECT_OPTION,
    payload: { questionId, value: e.target.attributes.getNamedItem("data-key").value }
  }
}

组件

class Section extends Component {
  handleClick = questionId => e => {
      this.props.handleClick({ questionId, e });
  };

  ...

  <Button.Group widths="5" onClick={this.handleClick("que1")} style={styles}>

为类似的动作创建一个减速器

1 个答案: