Question

我想将一个按钮中的值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">&times;</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;

Answer 1

最简单的方法是将模态组件嵌套在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。

https://github.com/reduxjs/react-redux

如何在React中将属性值从函数传递到“模态”对话框？

1 个答案: