Reactjs 道具数据在“模型”对话框中显示未定义

我正在使用Material UI表和reactjs。我在一列中有一个按钮，当单击该按钮时，我必须得到一个模型对话框以及该行数据

下面给出的波纹管是父组件 Table.js

//Update button event
handleRepeatUpdate = event => {
  this.refs.updaterepat.handleUpdateOpen();
  let e = event;
  this.setState({
    selected_rowID: e.id,
    selectEvent: e
  });
};

//material table

<MaterialTable
  title=""
  columns={[
    { title: "User Name", field: "userName", lookup: this.state.users },
    {
      title: "Role",
      field: "role",
      value: this.state.userName,
      lookup: {
        Primary: "Primary",
        Secondary: "Secondary",
        Escallation: "Escallation",
        Override: "Override "
      }
    },

    {
      title: "Start Date",
      field: "startDate",
      type: "datetime",
      value: this.state.role
    },
    {
      title: "End Date",
      field: "endDate",
      type: "datetime",
      value: this.state.startDate
    },

    {
      title: "Repeat",
      field: "isrepeat",
      type: "boolean",
      value: this.state.isrepeat,
      render: rowData => (
        <Fragment>
          <Button onClick={() => this.handleRepeatClick(rowData)}>
            <RectangleIcon />
          </Button>
          <Button onClick={() => this.handleRepeatUpdate(rowData)}>
            <EditIcon />
          </Button>
          <Button onClick={() => this.handleDeleteRepeat(rowData)}>
            <DeleteIcon />
          </Button>
        </Fragment>
      )
    }
  ]}
  data={this.state.data}
/>;

<RepeatUpdate ref="updaterepat" repeatrow = {this.state.selected_rowID} seleRow = {this.state.selectEvent}/>

//更新按钮事件
handleRepeatUpdate=事件=>{
this.refs.updaterepat.handleUpdateOpen（）；
设e=事件；
这是我的国家({
选定的rowID:e.id，
选择事件：e
});
};
//材料表
(
this.handleRepeatClick（rowData）}>
this.handleRepeatUpdate（rowData）}>
this.handleDeleteRepeat（rowData）}>
)
}
]}
data={this.state.data}
/>;

贝娄我给模型对话框页面 RepeatUpdate.js

import React, { Fragment } from "react";
import Button from "@atlaskit/button";
import Modal, { ModalTransition } from "@atlaskit/modal-dialog";
import style from "./style.css";
import { FieldTextStateless } from "@atlaskit/field-text";
import Form, { Field, FormFooter } from "@atlaskit/form";
import DropdownMenu, {
  DropdownItemGroup,
  DropdownItem
} from "@atlaskit/dropdown-menu";
import Select from "@atlaskit/select";
import FieldBase, { Label } from "@atlaskit/field-base";
import axios from "axios";
import { gridSize } from "@atlaskit/theme";
import {
  DatePicker,
  DateTimePicker,
  TimePicker
} from "@atlaskit/datetime-picker";
import { RadioGroup } from "@atlaskit/radio";

const Ends = [
  { value: "Never", label: "Never" },
  { value: "On", label: "On" },
  { value: "After", label: "After" }
];

var Days = [];
for (let i = 1; i <= 31; i++) {
  Days.push({
    label: i,
    id: i,
    value: i
  });
}

var weeknumber = [];
for (let j = 1; j <= 7; j++) {
  weeknumber.push({
    label: j,
    value: j,
    id: j
  });
}

var monthnum = [];
for (let k = 1; k <= 12; k++) {
  monthnum.push({
    label: k,
    value: k,
    id: k
  });
}

var afternum = [];
for (let i = 0; i <= 20; i++) {
  afternum.push({
    label: i,
    value: i
  });
}

//multiselect styling
const customStyles = {
  container(styles) {
    return { ...styles, width: "20%" };
  }
};

const lookup = {
  day: Days,
  week: weeknumber,
  month: monthnum,
  select: []
};

export default class RepeatPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      repeatonevery: "",
      startson: "",
      endsonnever: "",
      repeat: "",
      repeatAfter: "",
      dataValue: "select",
      repeatson: [],
      datetime: "",
      timeform: "",
      numval: "",
      data: "",
      selectdata: ""
    };
  }

  //repeat select
  onChange = ({ target: { value } }) => {
    this.setState({ dataValue: value, repeat: value });
    // console.log("repeat is:",value)
    // console.log("onChange repeat",this.state.repeat)
  };

  // repeat on every
  handleRepeatOn = e => {
    e.persist();
    this.setState({
      repeatonevery: e.target.value,
      data: this.props.respdata.id
    });
    console.log("repeats on :", this.state.repeatonevery);
  };

  //repeat starts on
  handleStartOn = startson => {
    this.setState({
      startson
    });
    console.log("starts on :", startson);
  };

  handleTimeForm = timeform => {
    this.setState({
      timeform
    });
    console.log("timeForm", timeform);
  };

  handleEndChange = event => {
    event.preventDefault();
    this.setState({
      endsonnever: event.target.value
    });
    console.log("handleEnd change", this.state.endsonnever);
  };

  handleSelect = numval => {
    this.setState({
      numval
    });
    console.log("select values", numval);
  };

  handleUpdateSubmit = e => {
    e.preventDefault();
  };

  handleUpdateOpen = event => {
    this.setState({
      isOpen: true,
      selectdata: this.props.repeatrow
      // selctitem : this.props.seleRow
    });
    let schedulesdata = this.props.repeatrow;
    let schedule_user = this.props.seleRow;
    console.log("selectdata :", this.state.selectdata);
    console.log(
      "schedule row data",
      this.props.repeatrow,
      "selected row is",
      this.props.seleRow
    );
  };

  close = () => this.setState({ isOpen: false });

  render() {
    console.log("repeatrow ", this.props.repeatrow);
    const { isOpen } = this.state;
    let self = this;
    const { dataValue } = this.state;
    const options = lookup[dataValue];
    return (
      <div>
        <div>
          <ModalTransition>
            {isOpen && (
              <Modal heading="">
                <Form onSubmit={data => console.log(data)}>
                  {({ formProps }) => (
                    <form {...formProps} name="text-fields">
                      <h2> Repeat</h2>
                      {/* <div className="row">  */}
                      <Field name="Repeat" defaultValue="" label="Repeat">
                        {({
                          fieldProps: { isRequired, isDisabled, ...others }
                        }) => (
                          <select
                            onChange={this.onChange}
                            value={this.state.repeat}
                          >
                            <option value="select">Select</option>
                            <option value="day">Day</option>
                            <option value="week">week</option>
                            <option value="month">Month</option>
                          </select>
                        )}
                      </Field>

                      <Field
                        name="Repeat"
                        defaultValue=""
                        label="Repeats on every"
                      >
                        {({
                          fieldProps: { isRequired, isDisabled, ...others }
                        }) => (
                          <select
                            onChange={this.handleRepeatOn}
                            value={this.state.repeatonevery}
                          >
                            {options.map(o => (
                              <option key={o.id}>{o.label}</option>
                            ))}
                          </select>
                        )}
                      </Field>

                      <div className="row">
                        <Field name="start" defaultValue="" label="Starts On">
                          {({
                            fieldProps: { isRequired, isDisabled, ...others }
                          }) => (
                            <DateTimePicker
                              innerProps={{ style: { width: gridSize() * 20 } }}
                              onChange={this.handleStartOn}
                              value={this.state.startson}
                            />
                          )}
                        </Field>
                      </div>

                      <Field name="end" defaultValue="" label="End">
                        {({
                          fieldProps: { isRequired, isDisabled, ...others }
                        }) => (
                          <div>
                            <div>
                              <label>
                                <input
                                  type="radio"
                                  value="never"
                                  name="never"
                                  style={{ marginLeft: "15px" }}
                                  onChange={this.handleEndChange}
                                />
                                Never
                              </label>
                            </div>
                            <div className="row">
                              <label>
                                <input
                                  type="radio"
                                  name="on"
                                  style={{ marginLeft: "31px" }}
                                  onChange={this.handleEndChange}
                                />
                                on
                              </label>
                              <DateTimePicker
                                innerProps={{
                                  style: { width: gridSize() * 20 }
                                }}
                                onChange={this.handleTimeForm}
                                value={this.state.timeform}
                              />
                            </div>
                            <div className="row">
                              <label>
                                <input
                                  type="radio"
                                  value="after"
                                  name="after"
                                  style={{ marginLeft: "31px" }}
                                  onChange={this.handleEndChange}
                                />
                                After
                              </label>
                              <Select
                                className="single-select selectwidth"
                                classNamePrefix="react-select"
                                options={afternum}
                                value={this.state.numval}
                                onChange={this.handleSelect}
                                // styles = {customStyles}
                              />

                              <label>Occurences</label>
                            </div>
                          </div>
                        )}
                      </Field>

                      <FormFooter>
                        <Button
                          type="submit"
                          appearance="primary"
                          onClick={this.handleUpdateSubmit}
                        >
                          Submit
                        </Button>
                        <Button className="BtnspaceP" onClick={this.close}>
                          Close
                        </Button>
                      </FormFooter>
                    </form>
                  )}
                </Form>
              </Modal>
            )}
          </ModalTransition>
        </div>
      </div>
    );
  }
}

import React，{Fragment}来自“React”；
从“@atlaskit/Button”导入按钮；
从“@atlaskit/Modal dialog”导入模态，{ModalTransition}；
从“/style.css”导入样式；
从“@atlaskit/field text”导入{FieldTextStateless}”；
从“@atlaskit/Form”导入表单，{Field，FormFooter}；
导入下拉菜单{
DropdownItemGroup，
下拉项
}从“@atlaskit/下拉菜单”；
从“@atlaskit/Select”导入Select；
从“@atlaskit/FieldBase”导入FieldBase，{Label}；
从“axios”导入axios；
从“@atlaskit/theme”导入{gridSize}；
进口{
日期选择器，
日期时间选择器，
时间选择器
}来自“@atlaskit/datetime选择器”；
从“@atlaskit/radio”导入{RadioGroup}”；
常数结束=[
{值：“从不”，标签：“从不”}，
{值：“On”，标签：“On”}，
{value:“After”，label:“After”}
];
风险值天数=[]；
for（设i=1；i{
这是我的国家({
时间表
});
console.log（“timeForm”，timeForm）；
};
handleEndChange=事件=>{
event.preventDefault（）；
这是我的国家({
endsonnever:event.target.value
});
log（“handleEnd change”，this.state.endsonnever）；
};
handleSelect=numval=>{
这是我的国家({
努姆瓦尔
});
log（“选择值”，numval）；
};
handleUpdateSubmit=e=>{
e、 预防默认值（）；
};
handleUpdateOpen=事件=>{
这是我的国家({
是的，
选择数据：this.props.repeatrow
//选择项：this.props.seleRow
});
让schedulesdata=this.props.repeatrow；
让schedule_user=this.props.seleRow；
log（“selectdata:，this.state.selectdata”）；
console.log(
“计划行数据”，
这个.props.repeatrow，
“所选行为”，
这是我的道具
);
};
close=（）=>this.setState（{isOpen:false}）；
render（）{
log（“repeatrow”，this.props.repeatrow）；
const{isOpen}=this.state；
让自我=这个；
const{dataValue}=this.state；
const options=lookup[dataValue]；
返回(
{isOpen&&(
console.log（数据）}>
{（{formProps}）=>(
重复
{/*   */}
{({
野外道具：{需要，禁用，…其他}
}) => (
挑选
白天
周
月
)}
{({
野外道具：{需要，禁用，…其他}
}) => (
{options.map（o=>(
{o.label}
))}
)}
{({
野外道具：{需要，禁用，…其他}
}) => (
)}
{({
野外道具：{需要，禁用，…其他}
}) => (
从未
在…上
之后
发生
)}
提交
接近
)}
)}
);
}
}

我没有在RepeatUpdate.js组件的handleUpdateOpen（）事件中获取道具数据。 在使用componentWillReceiveProps时，我获得了数据，但我希望在该事件中获得数据

---

谢谢

我认为你应该在Table.js状态下保持

打开

属性，并将其作为道具传递给

RepeatUpdate

，不要调用

this.refs.updaterepat.handleUpdateOpen（）；

，因为这只是一种不好的模式——当你可以用道具获得它时，用refs做些什么

然后使用

getDerivedS在RepeatUpdate中处理这个.props
// for RepeatUpdate.js
static getDerivedStateFromProps(state, props) {
 if(props.isOpen && props.isOpen !== state.isOpen) {
  return {...state, isOpen: props.isOpen};
 }
 return state;
}

 constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      repeatonevery: "",
      startson: "",
      endsonnever: "",
      repeat: "",
      repeatAfter: "",
      dataValue: "select",
      repeatson: [],
      datetime: "",
      timeform: "",
      numval: "",
      data: "",
      selectdata: ""
    };
   this.handleUpdateOpen = this.handleUpdateOpen.bind(this);
  }

  function handleUpdateOpen(){...}