最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Passing props to modal in ReactJs - Stack Overflow

programmeradmin1浏览0评论

I work actually on my first react app. It's a collection app. On this app, there is an admin dashbord, with all items of the app, and admin user can delete or modify item (like a traditional e-merce back office). For modify item, admin user click on button "Modify Item", and a modal open for modify item information.

My problem is when user open modal, the modal work fine, but i can't passing in props the information of the selected item (like brandname, reference, price ...). I'm very sorry to ask again a question in the same day, but i try many thing and no result. A little help is very wele.

Thank you in advance,

This is my code:

import React, { Component } from 'react';
import { database } from '../firebase/firebase';
import * as firebase from 'firebase';
import withAuthorization from './withAuthorization';
import _ from 'lodash';
import AuthUserContext from './AuthUserContext';
import FileUploader from "react-firebase-file-uploader";
import Image from 'react-image-resizer';
import{InstantSearch, SearchBox, Hits, Highlight, RefinementList} from "react-instantsearch/dom";
import Modal from 'react-responsive-modal';



function removeToCatalogue(hit) { 
  const item = hit.objectID;
    firebase.database().ref(`catalogue/${item}`).remove();
    console.log("Capsule correctement supprimée du catalogue")
}




const Hit = ({hit, onEdit}) =>
    <div className="item">
       <img src={hit.avatarURL} width={150} height={150}></img>
        <h1 className="marque">{hit.marque}</h1>
        <h3 className="numero">{hit.numero}</h3>
        <h4 className="reference">{hit.reference}</h4>
        <h4 className="marquesuite">{hit.marquesuite}</h4>
        <p className="cote">{hit.cote}</p>
        <button className="btn btn-warning" onClick={onEdit}>Modify Item</button>
        <button className="btn btn-danger" onClick={() => removeToCatalogue(hit)}>Supprimer</button> 
    </div>

  const Content = ({ onEdit }) => {

    const EnhancedHit = props =>
       <Hit onEdit={ onEdit } { ...props } />

    return (
      <div className="text-center">  
        <Hits hitComponent={ EnhancedHit } />
      </div>
    )
  }




class Admin extends React.Component {
  constructor (props) {
    super (props);

    this.state = {
      marque: '',
      marquesuite: '',
      numero: '',
      reference: '',
      cote: '',
      avatar: "",
      isUploading: false,
      progress: 0,
      avatarURL: "",
      catalogue: {},
      showModal: false,

    };
    this.onInputChange = this.onInputChange.bind(this);
    this.onHandleSubmit = this.onHandleSubmit.bind(this);

  }


  onOpenModal = () => {
    this.setState({ open: true });
  };

  onCloseModal = () => {
    this.setState({ open: false });
  };


  onInputChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  onHandleSubmit(e){
    e.preventDefault();
    const catalogue = {
      marque: this.state.marque,
      marquesuite: this.state.marquesuite,
      numero: this.state.numero,
      reference: this.state.reference,
      cote: this.state.cote,
      avatar: this.state.avatar,
      avatarURL: this.state.avatarURL,

    };
    database.push(catalogue);
    this.setState({
      marque: '',
      marquesuite: '',
      numero: '',
      reference: '',
      cote: '',
      avatar: "",
      isUploading: false,
      progress: 0,
      avatarURL: "",
    });
  }

  handleUploadStart = () => this.setState({ isUploading: true, progress: 0 });
  handleProgress = progress => this.setState({ progress });
  handleUploadError = error => {
    this.setState({ isUploading: false });
    console.error(error);
  };

  handleUploadSuccess = filename => {
    this.setState({ avatar: filename, progress: 100, isUploading: false });
    firebase
      .storage()
      .ref("images")
      .child(filename)
      .getDownloadURL()
      .then(url => this.setState({ avatarURL: url }));
  };


  render (){
    const { open } = this.state;
    return (
      <div className="container-fluid">
        <div className="container">
        <h1 class="text-center">Espace d'Administration</h1>
        <a href="" class="btn btn-primary btn-lg active" role="button" aria-disabled="true">Signaler une modification</a>
        <form onSubmit={this.onHandleSubmit}>
          <div className="form-group">
          <label>Marque de la capsule:</label>
          <input
            value={this.state.marque}
            type="text"
            name='marque'
            placeholder="Marque"
            onChange={this.onInputChange}
            ref="marque"
            className="form-control" />
          </div>
          <div>
          <label>Numéro de la capsule:</label>
          <input
            value={this.state.numero}
            type="text"
            name='numero'
            placeholder="Numéro de la capsule"
            onChange={this.onInputChange}
            ref="numero"
            className="form-control"/>
          </div>
          <div className="form-group">
          <label>Référence de la capsule:</label>
          <input
            value={this.state.marquesuite}
            type="text"
            name='marquesuite'
            placeholder="Référence de la capsule"
            onChange={this.onInputChange}
            ref="marquesuite"
            className="form-control"/>
          </div>
          <div className="form-group">
          <label>Référence de la capsule (suite):</label>
          <input
            value={this.state.reference}
            type="text"
            name='reference'
            placeholder="Référence de la capsule (suite)"
            onChange={this.onInputChange}
            ref="reference"
            className="form-control"/>
          </div>
          <div className="form-group">
          <label>Cote de la capsule:</label>
          <input
            value={this.state.cote}
            type="text"
            name='cote'
            placeholder="Cote de la capsule"
            onChange={this.onInputChange}
            ref="cote"
            className="form-control"/>
          </div>

          <label>Visuel de la capsule:</label>
          {this.state.isUploading && <p>Progress: {this.state.progress}</p>}
          {this.state.avatarURL && <img src={this.state.avatarURL} />}
          <FileUploader
            accept="image/*"
            name="avatar"
            randomizeFilename
            storageRef={firebase.storage().ref("images")}
            onUploadStart={this.handleUploadStart}
            onUploadError={this.handleUploadError}
            onUploadSuccess={this.handleUploadSuccess}
            onProgress={this.handleProgress}
          />
          <button className="btn btn-info">Ajouter une capsule</button>
        </form>
      </div>

        <h1 className="text-center">Catalogue de capsule</h1>



        <InstantSearch
            apiKey="xxx"
            appId="xxx"
            indexName="xxx">


            <SearchBox translations={{placeholder:'Rechercher une capsule'}} width="500 px"/>


            <Content onEdit={this.onOpenModal}/>  

              <div>
                <Modal open={open} onClose={this.onCloseModal} center>
                  <h2>Modification de la capsule</h2>
                  <p>Marque de la capsule:<input type="text" class="form-control" id="maj-marque" value=""></input></p>
                  <p>Numéro de la capsule:<input type="text" class="form-control" id="maj-num" value=""></input></p>
                  <p>Référence de la capsule:<input type="text" class="form-control" id="maj-ref" value=""></input></p>
                  <p>Référence de la capsule (suite):<input type="text" class="form-control" id="maj-refsuite" value=""></input></p>
                  <p>Cote de la capsule:<input type="text" class="form-control" id="maj-cote" value=""></input></p>
                  <button className="btn btn-success">Update</button>

                </Modal>
            </div>  


          </InstantSearch>



      </div>
    )
  }
}



const authCondition = (authUser) => !!authUser;

export default withAuthorization(authCondition)(Admin);

I work actually on my first react app. It's a collection app. On this app, there is an admin dashbord, with all items of the app, and admin user can delete or modify item (like a traditional e-merce back office). For modify item, admin user click on button "Modify Item", and a modal open for modify item information.

My problem is when user open modal, the modal work fine, but i can't passing in props the information of the selected item (like brandname, reference, price ...). I'm very sorry to ask again a question in the same day, but i try many thing and no result. A little help is very wele.

Thank you in advance,

This is my code:

import React, { Component } from 'react';
import { database } from '../firebase/firebase';
import * as firebase from 'firebase';
import withAuthorization from './withAuthorization';
import _ from 'lodash';
import AuthUserContext from './AuthUserContext';
import FileUploader from "react-firebase-file-uploader";
import Image from 'react-image-resizer';
import{InstantSearch, SearchBox, Hits, Highlight, RefinementList} from "react-instantsearch/dom";
import Modal from 'react-responsive-modal';



function removeToCatalogue(hit) { 
  const item = hit.objectID;
    firebase.database().ref(`catalogue/${item}`).remove();
    console.log("Capsule correctement supprimée du catalogue")
}




const Hit = ({hit, onEdit}) =>
    <div className="item">
       <img src={hit.avatarURL} width={150} height={150}></img>
        <h1 className="marque">{hit.marque}</h1>
        <h3 className="numero">{hit.numero}</h3>
        <h4 className="reference">{hit.reference}</h4>
        <h4 className="marquesuite">{hit.marquesuite}</h4>
        <p className="cote">{hit.cote}</p>
        <button className="btn btn-warning" onClick={onEdit}>Modify Item</button>
        <button className="btn btn-danger" onClick={() => removeToCatalogue(hit)}>Supprimer</button> 
    </div>

  const Content = ({ onEdit }) => {

    const EnhancedHit = props =>
       <Hit onEdit={ onEdit } { ...props } />

    return (
      <div className="text-center">  
        <Hits hitComponent={ EnhancedHit } />
      </div>
    )
  }




class Admin extends React.Component {
  constructor (props) {
    super (props);

    this.state = {
      marque: '',
      marquesuite: '',
      numero: '',
      reference: '',
      cote: '',
      avatar: "",
      isUploading: false,
      progress: 0,
      avatarURL: "",
      catalogue: {},
      showModal: false,

    };
    this.onInputChange = this.onInputChange.bind(this);
    this.onHandleSubmit = this.onHandleSubmit.bind(this);

  }


  onOpenModal = () => {
    this.setState({ open: true });
  };

  onCloseModal = () => {
    this.setState({ open: false });
  };


  onInputChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  onHandleSubmit(e){
    e.preventDefault();
    const catalogue = {
      marque: this.state.marque,
      marquesuite: this.state.marquesuite,
      numero: this.state.numero,
      reference: this.state.reference,
      cote: this.state.cote,
      avatar: this.state.avatar,
      avatarURL: this.state.avatarURL,

    };
    database.push(catalogue);
    this.setState({
      marque: '',
      marquesuite: '',
      numero: '',
      reference: '',
      cote: '',
      avatar: "",
      isUploading: false,
      progress: 0,
      avatarURL: "",
    });
  }

  handleUploadStart = () => this.setState({ isUploading: true, progress: 0 });
  handleProgress = progress => this.setState({ progress });
  handleUploadError = error => {
    this.setState({ isUploading: false });
    console.error(error);
  };

  handleUploadSuccess = filename => {
    this.setState({ avatar: filename, progress: 100, isUploading: false });
    firebase
      .storage()
      .ref("images")
      .child(filename)
      .getDownloadURL()
      .then(url => this.setState({ avatarURL: url }));
  };


  render (){
    const { open } = this.state;
    return (
      <div className="container-fluid">
        <div className="container">
        <h1 class="text-center">Espace d'Administration</h1>
        <a href="https://super-capsule.000webhostapp./signaler-modification" class="btn btn-primary btn-lg active" role="button" aria-disabled="true">Signaler une modification</a>
        <form onSubmit={this.onHandleSubmit}>
          <div className="form-group">
          <label>Marque de la capsule:</label>
          <input
            value={this.state.marque}
            type="text"
            name='marque'
            placeholder="Marque"
            onChange={this.onInputChange}
            ref="marque"
            className="form-control" />
          </div>
          <div>
          <label>Numéro de la capsule:</label>
          <input
            value={this.state.numero}
            type="text"
            name='numero'
            placeholder="Numéro de la capsule"
            onChange={this.onInputChange}
            ref="numero"
            className="form-control"/>
          </div>
          <div className="form-group">
          <label>Référence de la capsule:</label>
          <input
            value={this.state.marquesuite}
            type="text"
            name='marquesuite'
            placeholder="Référence de la capsule"
            onChange={this.onInputChange}
            ref="marquesuite"
            className="form-control"/>
          </div>
          <div className="form-group">
          <label>Référence de la capsule (suite):</label>
          <input
            value={this.state.reference}
            type="text"
            name='reference'
            placeholder="Référence de la capsule (suite)"
            onChange={this.onInputChange}
            ref="reference"
            className="form-control"/>
          </div>
          <div className="form-group">
          <label>Cote de la capsule:</label>
          <input
            value={this.state.cote}
            type="text"
            name='cote'
            placeholder="Cote de la capsule"
            onChange={this.onInputChange}
            ref="cote"
            className="form-control"/>
          </div>

          <label>Visuel de la capsule:</label>
          {this.state.isUploading && <p>Progress: {this.state.progress}</p>}
          {this.state.avatarURL && <img src={this.state.avatarURL} />}
          <FileUploader
            accept="image/*"
            name="avatar"
            randomizeFilename
            storageRef={firebase.storage().ref("images")}
            onUploadStart={this.handleUploadStart}
            onUploadError={this.handleUploadError}
            onUploadSuccess={this.handleUploadSuccess}
            onProgress={this.handleProgress}
          />
          <button className="btn btn-info">Ajouter une capsule</button>
        </form>
      </div>

        <h1 className="text-center">Catalogue de capsule</h1>



        <InstantSearch
            apiKey="xxx"
            appId="xxx"
            indexName="xxx">


            <SearchBox translations={{placeholder:'Rechercher une capsule'}} width="500 px"/>


            <Content onEdit={this.onOpenModal}/>  

              <div>
                <Modal open={open} onClose={this.onCloseModal} center>
                  <h2>Modification de la capsule</h2>
                  <p>Marque de la capsule:<input type="text" class="form-control" id="maj-marque" value=""></input></p>
                  <p>Numéro de la capsule:<input type="text" class="form-control" id="maj-num" value=""></input></p>
                  <p>Référence de la capsule:<input type="text" class="form-control" id="maj-ref" value=""></input></p>
                  <p>Référence de la capsule (suite):<input type="text" class="form-control" id="maj-refsuite" value=""></input></p>
                  <p>Cote de la capsule:<input type="text" class="form-control" id="maj-cote" value=""></input></p>
                  <button className="btn btn-success">Update</button>

                </Modal>
            </div>  


          </InstantSearch>



      </div>
    )
  }
}



const authCondition = (authUser) => !!authUser;

export default withAuthorization(authCondition)(Admin);
Share Improve this question asked Jan 8, 2019 at 16:36 MillosMillos 431 gold badge2 silver badges5 bronze badges 2
  • 2 would you mind to create a minimal example to reproduce your issue? You could remove all the stuff which is not strictly related with the issue, it would make easier for the people to help you and provide you a good answer – quirimmo Commented Jan 8, 2019 at 16:42
  • Where are these props stored ? How have you tried to render your props ? Did you get any error message ? – Treycos Commented Jan 8, 2019 at 16:44
Add a ment  | 

1 Answer 1

Reset to default 5

You don't need to pass props to the Modal ponent. Instead, save whatever you want to display in the Admin state, and render it through there.

In the Hit ponent, onEdit function should take an argument which is an object with all the information you need in the modal. Where you had <button className="btn btn-warning" onClick={onEdit}>Modify Item</button> will bee:

    handleClick = () => {
        // I simplified the data you need to be only marque and numero here and below.
        onEdit({marque: hit.marque, numero: hit.numero})
    }
    <button className="btn btn-warning" onClick={handleClick}>Modify Item</button>

Then in the Admin ponent:

    onOpenModal = (itemData) => {
        this.setState({ open: true, itemData  });
    };


    <Modal open={open} onClose={this.onCloseModal} center>
          <h2>Modification de la capsule</h2>
          <p>Marque de la capsule:<input type="text" class="form-control" id="maj-marque" value={this.state.itemData.marque}></input></p>
          <p>Numéro de la capsule:<input type="text" class="form-control" id="maj-num" value={this.state.itemData.numero}></input></p>
          <button className="btn btn-success">Update</button>
    </Modal>

Hope this helps. Let me know if you have any questions.

发布评论

评论列表(0)

  1. 暂无评论