React-Redux：在 map 函数中传递事件处理

Question

React/Redux 的新手，我很难实现事件处理。

我知道 'this' 引用键在传递到地图（this.props.addRecipe.map of recipebox）函数时变为空，但我不知道如何解决它。

本质上，我想将数组中每个元素的 onChange 处理程序传递给 ModalBox。

src/containers/recipebox

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ListGroup, ListGroupItem, Panel, Button, Modals } from 'react-bootstrap';
import MyModal from '../components/mymodal';
import { bindActionCreators } from 'redux';
import { deleteRecipe } from '../actions/index';
import shortid from 'shortid'
import ModalBox from '../containers/modalbox'


class RecipeBox extends Component {
  constructor(props){
    super(props);

    this.renderRecipeList = this.renderRecipeList.bind(this)
    this.handleRecipeNameChange = this.handleRecipeNameChange.bind(this)
    this.handleUserIngredientsChange = this.handleUserIngredientsChange.bind(this)
  }

  handleRecipeNameChange(event){
    this.setState({recipeName: event.target.value})
  }
  handleUserIngredientsChange(event){
    this.setState({userIngredients: event.target.value})
  }
  renderRecipeList(recipeItem, index){
    const recipe = recipeItem.recipe;
    const ingredients = recipeItem.ingredients;
    const id = shortid.generate();
    return(
      <div key={id}>
        <Panel bsStyle="primary" collapsible header={<h3>{recipe}</h3>}>
          <ListGroup >
            <ListGroupItem  header="Ingredients"></ListGroupItem>
            {ingredients.map(function(ingredient,index){
              return <ListGroupItem key={index}>{ingredient}</ListGroupItem>;
            })}
            <ListGroupItem>
              <Button
                onClick={() => this.props.deleteRecipe(recipeItem)}
                bsStyle="danger">Delete
              </Button>
              <ModalBox
                modalTextTitle={'Edit Recipe'}
                recipeName={recipe}
                userIngredients={ingredients}
                handleRecipeNameChange={this.handleRecipeNameChange}
                handleUserIngredientsChange={this.handleUserIngredientsChange}
                onClickSubmit={this.onClickSubmit}
              />
            </ListGroupItem>
          </ListGroup>
        </Panel>
      </div>
    )
  }
  render(){
    return(
      <div className="container">
        <div className='panel-group'>
          {this.props.addRecipe.map(this.renderRecipeList)}
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    addRecipe : state.recipeState
  };
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({deleteRecipe : deleteRecipe}, dispatch)
}

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

src/containers/modalbox

import React, { Component } from 'react';
import { Button, Modal } from 'react-bootstrap';

class ModalBox extends Component {
  constructor(props){
    super(props)
    this.state = {
      showModal: false
    };
    this.toggleModal = this.toggleModal.bind(this);
  }
  toggleModal(){
    this.setState({
      showModal: !this.state.showModal
    });
  }
  submitData(link){
    link()
    this.toggleModal()
  }
  render() {
    return (
      <div>
        <Button
          bsStyle="info"
          onClick={this.toggleModal}
          >
          {this.props.modalTextTitle}
        </Button>

        <Modal show={this.state.showModal} onHide={this.toggleModal}>
          <Modal.Header closeButton>
            <Modal.Title>{this.props.modalTextTitle}</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <form>
              <div className="form-group">
                <label htmlFor="recipeName">Name of Recipe:</label>
                <input
                  value={this.props.recipeName}
                  onChange= {this.props.handleRecipeNameChange}
                  type="text"
                  className="form-control"
                  id="recipeName" />
              </div>
              <div className="form-group">
                <label htmlFor="userIngredients">Ingredients:</label>
                <textarea
                  placeholder="you can seperate by comma"
                  value={this.props.userIngredients}
                  onChange={this.props.handleUserIngredientsChange}
                  type="text"
                  className="form-control"
                  id="userIngredients" />
              </div>
            </form>
          </Modal.Body>
          <Modal.Footer>
            <Button
              bsStyle="info"
              onClick={ () => this.submitData(this.props.onClickSubmit) }>
              {this.props.modalTextTitle}
            </Button>
            <Button
              bsStyle="danger"
              onClick= {this.toggleModal}
            >Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

export default ModalBox

Answer 1

在地图函数中，您需要像下面的代码那样更改 this，

 render(){
  const self = this;
  return(
    <div className="container">
      <div className='panel-group'>
        {this.props.addRecipe.map(self.renderRecipeList)}
      </div>
    </div>
  )
}

React-Redux：在 map 函数中传递事件处理

React-Redux: Passing Event Handling inside map function

javascript

bootstrap-modal

reactjs

react-redux