我想将一个按钮中的值props.filename
传递给模式对话框。单击按钮将打开对话框。
该按钮的代码如下,该文件称为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;
当他们单击模式中的“保存”按钮(如下)时,我需要从SaveDocumentButton中了解filename
属性。我现在如何访问它?
模态类的代码如下,文件名为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;
这两个的父级也位于下面的Scan.js
中,SaveDocumentButton
不在此处明确表示,但位于< FileList/>
组件中
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;
答案 0 :(得分:0)
最简单的方法是将模态组件嵌套在q)select[0 10] from aRec
sym| px id
---| ------------
A | 4.236121 1
A | 5.932252 3
Abc| 5.473628 5
A | 0.7014928 7
Abc| 3.503483 8
A | 8.254616 9
Abc| 4.328712 10
A | 5.435053 19
A | 1.014108 22
A | 1.492811 25
q)0 10 sublist aRec
sym| px id
---| ------------
A | 4.236121 1
A | 5.932252 3
Abc| 5.473628 5
A | 0.7014928 7
Abc| 3.503483 8
A | 8.254616 9
Abc| 4.328712 10
A | 5.435053 19
A | 1.014108 22
A | 1.492811 25
组件所嵌套的组件内。在SaveButton
的父组件中声明onClick
处理程序,并传递{ SaveButton
的{1}}处理程序作为属性。让onClick
显示模式并将文件名作为属性传递。
SaveButton
如果您不想将保存按钮和模式嵌套在同一组件中,则可能希望模式从全局状态获取文件名。在反应中管理全局状态的标准方法是通过onClick
。