Quero passar um valor props.filenamede um botão para uma caixa de diálogo modal. Clicar no botão abre a caixa de diálogo.
O código para o botão está abaixo, o arquivo é chamado SaveDocumentButton.js:
import React, { Component } from "react";
import Octicon from "react-octicon";
import "./../styles/document.css";
import "react-datepicker/dist/react-datepicker.css";
const SaveDocumentButton = props => {
return (
<div>
<button
type="button"
className="btn btn-primary"
data-toggle="modal"
data-target="#saveDocumentModal"
data-tip="Edit"
data-id={props.filename}
onClick={() => console.log("save click" + props.filename)}
>
<Octicon name="tools" />
</button>
</div>
);
}
export default SaveDocumentButton;
Quando eles clicam no botão 'Salvar' no modal (abaixo), preciso saber a filenamepropriedade do botão SalvarDocument. Como posso acessá-lo neste momento? O código para a classe modal está abaixo, o arquivo é denominado SaveDocument.js.
import React, { Component } from "react";
import postDocument from "./../rest/PostDocument";
import fetchPersons from "./../rest/FetchPersons";
import fetchTypes from "./../rest/FetchTypes";
import PersonList from "./../components/PersonList";
import TypeList from "./../components/TypeList";
import ShowDatePicker from "./../components/ShowDatePicker";
import moment from "moment";
class SaveDocument extends Component {
state = {
persons: [],
types: [],
document: {
documentDate: moment(),
personFrom: {
id: ""
},
personTo: {
id: ""
},
type: {
id: ""
},
comments: "",
filename: ""
}
};
//
//
//
// skipped some lines
//
//
//
saveDocument() {
console.log("In save document=" + this.state.persons[0].id);
console.log("In save document=" + this.state.filename);
var documentProperty = this.state.document;
if (!documentProperty.personFrom.id) {
documentProperty.personFrom = this.state.persons[0];
}
if (!documentProperty.personTo.id) {
documentProperty.personTo = this.state.persons[0];
}
if (!documentProperty.type.id) {
documentProperty.type = this.state.types[0];
}
this.setState({ documentProperty });
postDocument.callApi(this.state.document, "hi")
};
render() {
return (
<div
className="modal fade"
id="saveDocumentModal"
tabIndex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">
Save document
</h5>
<button
type="button"
className="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
<div className="row">
<div className="col-4 text-left">Document Date:</div>
<div className="col-6">
<ShowDatePicker
selected={this.state.document.documentDate}
onChangeCallback={this.handleDocumentDateChange}
/>
</div>
</div>
<br />
<div className="row">
<div className="col-4 text-left">Person From:</div>
<PersonList
persons={this.state.persons}
value={this.state.document.personFrom.id}
onChangeCallback={this.handlePersonFromChange}
/>
</div>
<br />
<div className="row">
<div className="col-4 text-left">Person To:</div>
<PersonList
persons={this.state.persons}
value={this.state.document.personTo.id}
onChangeCallback={this.handlePersonToChange}
/>
</div>
<br />
<div className="row">
<div className="col-4 text-left">Type:</div>
<TypeList
types={this.state.types}
value={this.state.document.type.id}
onChangeCallback={this.handleTypeChange}
/>
</div>
<br />
<div className="row">
<div className="col-4 text-left">Comments:</div>
<div className="col-6">
<input
type="text"
className="form-control position-left"
id="commentsBox"
placeholder="Comments"
onChange={this.handleCommentsChange}
onKeyPress={event => {
if (event.key === "Enter") {
}
}}
/>
</div>
</div>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-secondary"
data-dismiss="modal"
onClick={() => this.resetFields()}
>
Close
</button>
<button
type="button"
className="btn btn-primary"
data-dismiss="modal"
onClick={() => this.saveDocument()}
>
Save changes
</button>
</div>
</div>
</div>
</div>
);
}
}
export default SaveDocument;
Além disso, o pai para esses dois está Scan.jsabaixo, o que SaveDocumentButtonnão está explicitamente aqui, mas no < FileList/>componente
import React, { Component } from "react";
import fetchFiles from "./../rest/FetchFiles";
import FileList from "./../components/FileList";
import RefreshButton from "./../components/RefreshButton";
import SaveDocument from "./SaveDocument";
import "./../styles/app.css";
import "react-datepicker/dist/react-datepicker.css";
class Scan extends Component {
state = {
files: [],
timer: this.poll()
};
displayFiles = fileInfo => {
console.log(">> " + fileInfo);
this.setState(prevState => ({
files: fileInfo
}));
console.log("diaplayf File method" + this.state.timer);
};
poll() {
var _this = this;
//setInterval(this.poll, 10000)
setInterval(function () {
fetchFiles.callApi(_this.displayFiles);
}, 500000);
console.log("Timer");
}
componentWillMount() {
fetchFiles.callApi(this.displayFiles);
}
componentWillUnmount() {
console.log("um");
clearInterval(this.state.timer);
}
render() {
console.log("IN RENDER");
return (
<div>
<RefreshButton onSubmit={this.displayFiles} />
<FileList files={this.state.files} />
<SaveDocument />
</div>
);
}
}
export default Scan;
A maneira mais simples é aninhar seu componente modal dentro do componente em que seu SaveButtoncomponente está aninhado. Declare um onClickmanipulador no componente pai de seu SaveButtone passe esse onClickmanipulador para o SaveButtoncomo uma propriedade. Faça com que onClickmostre o modal e passe o nome do arquivo como uma propriedade.
class Form extends React.Component {
constructor() {
super();
this.state = {
filename: '',
showModal: false,
};
}
render() {
const { filename, showModal } = this.state;
const onSaveButtonClick = () => {
this.setState({ showModal: true });
}
const onModalSubmit = () => {
this.setState({ showModal: false });
}
...
return (
...
<SaveButton
...
filename={this.props.filename}
onClick={onSaveButtonClick}
/>
...
{showModal ? (
<SaveDocument
...
onSubmit={onModalSubmit}
filename={filename}
/>
) && null}
);
}
}
Se você não deseja aninhar o botão salvar e modal dentro do mesmo componente, você pode querer que seu modal obtenha o nome do arquivo de um estado global. A maneira padrão de gerenciar o estado global em reação é através redux.
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras