Pass item data to a react modal

前端 未结 3 1582
伪装坚强ぢ
伪装坚强ぢ 2021-02-14 23:46

I have a map that render few items and one of its line is below

 this.setState({\"openDeleteModal\":true)}>Delete
相关标签:
3条回答
  • 2021-02-15 00:03

    Try this: this is the form which has the button, and is a child component of some other component that passes the handleButtonAction method as props, and the button takes the input data and invokes this parent component method

    handleSubmit = (e) => {
      e.preventDefault();
      const data = e.target.elements.option.value.trim();
      if (!data) {
        this.setState(() => ({ error: 'Please type data' }));
      } else {
        this.props.handleButtonAction(data, date);
      }
    } 
    
    {this.state.error && <p>{this.state.error}</p>} 
    <form onSubmit={this.handleSubmit}>
      <input type="text" name="option"/>
      <div>
        <button>Get data</button>
      </div>
    </form>
    

    The parent component:

    handleButtonAction = (data) => {
    
      axios.get(`http://localhost:3000/someGetMethod/${data}`).then(response => {
            const resData = response.data;
            this.setState({
                openModal: true,
                status: response.status,
                data: resData
             });
        }).catch((error) => {
            if (error.message.toLowerCase() === 'network error') {              
              this.setStateWithError(-1, {});
            }
            else { // not found aka 404              
              this.setStateWithError(error.response.status, '', {currency, date: ddat});
            }
        });        
    }
    
    0 讨论(0)
  • 2021-02-15 00:09

    When working on React applications, try not to think in terms of passing values to other components, but rather updating state that your components are exposed to. In your example, assuming your modal component is a child of the same component your list of a tags belongs to, you could set the values you are interested in exposing to the modal on the state, as well as updating the property that signals whether the modal is open or not. For example:

    class Container extends React.Component {
        constructor(props) {
           super(props)
           this.state = {
              openDeleteModal: false,
              activeItemName: '', //state property to hold item name
              activeItemId: null, //state property to hold item id
           }
        }
    
        openModalWithItem(item) {
           this.setState({
              openDeleteModal: true,
              activeItemName: item.name,
              activeItemId: item.id
           })
        }
    
        render() {
    
        let buttonList = this.props.item.map( item => {
          return (<button onClick={() => this.openModalWithItem(item)}>{item.name}</button>
        });
    
        return (
         <div>
            {/* Example Modal Component */}
            <Modal isOpen={this.state.openDeleteModal}  
                   itemId={this.state.activeItemId}
                   itemName={this.state.activeItemName}/>
            { buttonList }
         </div>
        )
        }
    }
    
    0 讨论(0)
  • 2021-02-15 00:18

    Copying over my answer from How to pass props to a modal

    Similar scenario

    constructor(props) {
    
        super(props)
    
    
        this.state = {
          isModalOpen: false,
          modalProduct: undefined,
        }
    }
    
    //****************************************************************************/
    
    render() {
    
        return (
            <h4> Bag </h4>
            {this.state.isModalOpen & (
              <Modal 
                modalProduct={this.state.modalProduct}
                closeModal={() => this.setState({ isModalOpen: false, modalProduct: undefined})
                deleteProduct={ ... }
              />
            )
    
            {bag.products.map((product, index) => (
            <div key={index}>
                <div>{product.name}</div>
                <div>£{product.price}</div>
                <div>
                <span> Quantity:{product.quantity} </span>
                <button onClick={() => this.props.incrementQuantity(product, product.quantity += 1)}> + </button>
                <button onClick={() => this.decrementQuantity(product)}> - </button> // <----
                </div>
            </div>
            ))}
        )
    }
    
    //****************************************************************************/
    
    decrementQuantity(product) {
    
        if(product.quantity === 1) {
            this.setState({ isModalOpen: true, modalProduct: product })
        } else {
            this.props.decrementQuantity(product)
        }
    }
    
    0 讨论(0)
提交回复
热议问题