Question

在使用每种食物的方法并使用每种方法来显示用户在单击用户想要的</FoodButton>时选择的食物类型之前，我的代码有点混乱。 / p>

现在，我想以一种仅能处理所有问题的方法来对其进行优化。

我得到的错误提示：

'item' is not defined

（指的是<FoodButton clicked={() => this.selectItem(item)} label={"Chicken Taco"}/>）

我一直在尝试许多不同的方法来解决此问题，但似乎找不到解决方案。

为什么我在做什么不起作用？

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Modal from 'react-modal';

import Aux from '../../../../hoc/Aux';
import FoodButton from '../FoodButtons/FoodButton';
import CheckoutButton from '../CheckoutButton/CheckoutButton';
import axios from '../../../../axios-foodChosen';

import { CLOSE_MODAL, OPEN_MODAL } from "../../../../store/action/NoNameAction";

class TacoTypes extends Component {
    state = {
        selectedItem: ''
    };

    constructor(props) {
        super(props);

        this.items = {
            chickenTaco: 'Chicken Taco',
            beefTaco: 'Beef Taco',
            chickenBurrito: 'Chicken Burrito'
        };
    }

    componentWillMount() {
        // for modal
        Modal.setAppElement('body');
    }

    selectItem(item) {
        this.setState({selectedItem: item})
    }

    render() {
        return (
            <Aux>
                <FoodButton clicked={() => this.selectItem(item)} label={"Chicken Taco"}/>
                <FoodButton clicked={() => this.beefTaco()} label={"Beef Taco"}/>
                <FoodButton clicked={() => this.chickenBurrito()} label={"Chicken Burrito"}/>

                <CheckoutButton clicked={() => this.props.openModalRedux()}/>

                <Modal isOpen={this.props.isOpen}>
                    <p>
                        {this.items.map(item => (
                            <p key={item}>{item}</p>
                        ))}
                    </p>
                    <button onClick={() => this.props.closeModalRedux()}>Close</button>
                </Modal>
            </Aux>
        );
    }
}

const mapStateToProps = state => {
    return {
        // props for modal
        isOpen: state.global.isModalOpen,
    }
};

const mapDispatchToProps = dispatch => {
    return {
        // Modal handlers
        openModalRedux: () => dispatch({type: OPEN_MODAL}),
        closeModalRedux: () => dispatch({type: CLOSE_MODAL})
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(TacoTypes);

Answer 1

暂时移除Redux绒毛，这应该可以：

import React, { Component } from "react";
import Modal from "react-modal";

import FoodButton from "../FoodButtons/FoodButton";
import CheckoutButton from "../CheckoutButton/CheckoutButton";

class TacoTypes extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedItem: undefined,
      modalIsOpen: false,
    };
    this.items = {
      chickenTaco: "Chicken Taco",
      beefTaco: "Beef Taco",
      chickenBurrito: "Chicken Burrito",
    };
  }

  componentWillMount() {
    Modal.setAppElement("body");
  }

  selectItem(item) {
    this.setState({ selectedItem: item });
  }

  render() {
    return (
      <Aux>
        {Object.entries(this.items).map(([item, label]) => (
          <FoodButton
            clicked={() => this.selectItem.call(this, item)}
            label={label}
            key={item}
          />
        ))}

        <CheckoutButton clicked={() => this.setState({ modalIsOpen: true })} />

        <Modal isOpen={this.state.modalIsOpen}>
          <p>
            {Object.entries(this.items).map(([item, label]) => (
              <p key={item}>
                {item}
                {this.state.selectedItem === item
                  ? " (You chose this one!)"
                  : null}
              </p>
            ))}
          </p>
          <button onClick={() => this.setState({ modalIsOpen: false })}>
            Close
          </button>
        </Modal>
      </Aux>
    );
  }
}

（我正在使用this.selectItem.call(this, ...)），因为我不确定您的环境是否针对函数设置为类属性。如果是这样，您可以

selectItem = (item) => {
  this.setState({ selectedItem: item });
}

// ...

clicked={() => this.selectItem(item)}

相反。）

Answer 2

如错误消息所示，未定义变量item。这应该起作用：

<FoodButton clicked={() => this.selectItem('Chicken Taco')} label={"Chicken Taco"}/>

或

<FoodButton clicked={() => this.selectItem(this.items.chickenTaco)} label={"Chicken Taco"}/>

更新：

我只想在模式中显示用户单击的按钮

有多种方法可以执行此操作，具体取决于您如何安排数据。我将在此处显示一个选项作为概念证明：

有三个按钮。单击其中任何一个将相应的项目添加到所选列表中（如果已选择，则将其从列表中删除）。您可以在特定的设置中执行类似的操作。

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      items: {
        chicken: false,
        beef: false,
        other: false
      }
    }
  }
  onSelect (name) {
    this.setState((prevState) => {
      return {
        items: {
          ...prevState.items,
          [name]: !prevState.items[name]
        }
      }
    })
  }
  getSelected () {
    return Object.entries(this.state.items).filter(entry => entry[1]).map(entry => entry[0]).join(',')
  }
  render() {
    return (
      <div>
      {Object.keys(this.state.items).map(name => (
        <button onClick={() => this.onSelect(name)} key={name}>{name}</button>
      ))}
      
      <div> 
        Selected: {this.getSelected()}
      </div>
      
      </div>
    )
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Answer 3

如果要传递item，则需要将其指定为函数参数：

<FoodButton clicked={item => this.selectItem(item)} label={"Chicken Taco"}/>

为什么用户单击的内容不会出现在我的模式中？

3 个答案: