我实际上是在第一个React应用程序上工作。这是一个收集应用程序。在此应用程序上，有一个管理员仪表板，其中包含该应用程序的所有项目，并且管理员用户可以删除或修改项目（例如传统的电子商务后台）。对于修改项目，管理员用户单击“修改项目”按钮，然后打开一个用于修改项目信息的模式。
我的问题是，当用户打开模态时，模态工作正常，但是我无法传递道具中所选项目的信息（例如品牌名称，参考，价格...）。很抱歉在同一天再次提出问题，但我尝试了很多事情，但没有结果。一点帮助是非常欢迎的。
先谢谢您
这是我的代码：
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.com/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);
答案 0 :(得分：0)
您不需要将道具传递到Modal组件。而是保存要在Admin状态下显示的所有内容，然后通过该位置进行渲染。
在Hit组件中，onEdit函数应使用一个参数，该参数是一个对象，其中包含模态中您需要的所有信息。 <button className="btn btn-warning" onClick={onEdit}>Modify Item</button>所在的位置将变为：
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>
然后在Admin组件中：
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>
希望这会有所帮助。如果您有任何问题，请告诉我。