मैंने अपनी उपयोगकर्ता आईडी को अपने 'ऑर्डर मैसेज' घटक में पास कर दिया है लेकिन मेरे फ़ंक्शन में अपरिभाषित है। जब मेरा उपयोगकर्ता हैंडलफॉर्म सबमिट फ़ंक्शन में फ़ॉर्म का उपयोग करके संदेश सबमिट करता है तो मुझे उपयोगकर्ता आईडी और संदेश के डेटाटाइम की आवश्यकता होती है। मैं दिनांक और समय प्राप्त करने में कामयाब रहा हूं, लेकिन उपयोगकर्ता आईडी प्राप्त करने के लिए लॉग को कंसोल करने का प्रयास करते समय मुझे एक त्रुटि मिल रही है। मैंने this.props.... और this.state की कोशिश की है, लेकिन दोनों अपरिभाषित कहते हैं, क्या आप कृपया मदद कर सकते हैं। मेरे कंस्ट्रक्टर में मैंने const UserId = props.location.state.UserID का उपयोग करके परीक्षण किया है; और डीबग में मैं देख सकता हूं कि यह उपयोगकर्ता आईडी को सही ढंग से प्राप्त कर चुका है, इसलिए मुझे यकीन नहीं है कि इसे मेरे हैडलफॉर्म सबमिट फ़ंक्शन में कैसे प्राप्त किया जाए।

import React from "react";
import Moment from "moment";
import { Form, Button } from "react-bootstrap";

class OrderMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoading: false,
      checkboxes: [],
      selectedId: [],
      formLableSelected: "",
      formSelectedSubject: "",
      formSelectedSubjectId: "",
      formNewSubject: "",
      formChainID: "",
      formMessageBody: "",
      userId: '',
    };
    const UserId = props.location.state.UserID;
  }
  

  componentDidMount() {
    this.setState({ isLoading: true });
    const proxyurl = "https://cors-anywhere.herokuapp.com/";
    const url =
      "myURL" +
      this.props.location.state.orderNumber;
    fetch(proxyurl + url)
      .then((res) => res.json())
      .then((data) => this.setState({ data: data, isLoading: false }));
  }

  handleClick = (id) => {
    if (this.state.selectedId !== id) {
      this.setState({ selectedId: id });
    } else {
      this.setState({ selectedId: null });
    }
  };

  setformSubjectID(messageSubject) {
    if (messageSubject.subject === this.state.formSelectedSubject) {
      this.setState({ formSelectedSubjectId: messageSubject.messageSubjectId });
    }
  }

  handleChangeSubject = (event) => {
    this.setState({ formSelectedSubject: event.target.value });
    this.state.data.message_Subjects.map((ms) => this.setformSubjectID(ms));
  };

  handleFormSubmit(e) {
    e.preventDefault();

    // get current time
    let submit_time = Moment().format("ddd DD MMM YYYY HH:mm:ss");
    console.log("messageDatetime", submit_time);

    // get user id  THIS IS WHAT DOESN’T WORK
    console.log("messageSentFrom", this.state.userId);
console.log("messageSentFrom", this.props.location.state.UserID);

  }

  render() {
    const { data, isLoading } = this.state;

    if (isLoading) {
      return <p>Loading ...</p>;
    }

    if (data.length === 0) {
      return <p> no data found</p>;
    }

    console.log("mess: ", data);

    return (
      <div>
        
        <div className="sendMessageContent">
         <Form className="sendMessageForm" onSubmit={this.handleFormSubmit}>
            <Form.Group className="formRadio">
              <Form.Check
                className="formRadiob"
                type="radio"
                label="New chat"
                value="new"
                name="neworexisitng"
                id="New Message"
                onChange={this.onFormMessageChanged}
                defaultChecked
              />
              <Form.Check
                className="formRadiob"
                type="radio"
                label="Reply to exisiting chat"
                value="reply"
                name="neworexisitng"
                id="exisiting Message"
                onChange={this.onFormMessageChanged}
              />
            </Form.Group>
            {this.returnCorrectFormFields(data)}
            <Form.Group>
              <Form.Label>Message Body</Form.Label>
              <Form.Control as="textarea" rows={3} />
            </Form.Group>
            <Button variant="primary" type="submit">
              Send Message
            </Button>
          </Form>
        </div>
      </div>
    );
  }

 returnCorrectFormFields(data) {
    if (this.state.formLableSelected === "new") {
      return this.newMessageSubject(data);
    } else {
      return this.choseMessageSubject(data);
    }
  }

  choseMessageSubject(data) {
    return (
      <Form.Group>
        <Form.Label>Select the message subject</Form.Label>
        <Form.Control as="select" onChange={this.handleChangeSubject}>
          <option value="0">Choose...</option>
          {data.message_Subjects.map((ms) => (
            <option value={ms.subject}>{ms.subject}</option>
          ))}
        </Form.Control>
      </Form.Group>
    );
  }

  newMessageSubject(data) {
    return (
      <Form.Group>
        <Form.Label>Enter Message Subject</Form.Label>
        <Form.Control type="text" placeholder="Enter message subject" />
      </Form.Group>
    );
  }

  onFormMessageChanged = (event) => {
    this.setState({
      formLableSelected: event.target.value,
    });
  };

  getAllMessageInChain(messageChain) {
    return (
      <div className="messageHistory">
        <div className="messageHistoryHeader">
          <div className="innerMS-history-body">Message</div>
          <div className="innerMS">Date and Time</div>
          <div className="innerMS">Message sent by</div>
        </div>
        {messageChain.map((ms) => (
          <div className="messageHistoryBody">
            <div className="innerMS-history-body">{ms.messageBody}</div>
            <div className="innerMS">
              {Moment(ms.dateTime).format("ddd DD MMM YYYY hh:mm:ss")}
            </div>
            <div className="innerMS">{ms.sentFromId}</div>
          </div>
        ))}
      </div>
    );
  }

  getLatestMessageDateTime(messageChain) {
    const lastmessage = messageChain.length - 1;

    Moment.locale("en");
    var dt = messageChain[lastmessage].dateTime;
    return Moment(dt).format("ddd DD MMM YYYY hh:mm:ss");
  }
}

export default OrderMessages;
1
Reeves62 4 पद 2020, 19:03

1 उत्तर

सबसे बढ़िया उत्तर

this का दायरा आपके द्वारा उपयोग किए जा रहे फ़ंक्शन का घटक नहीं है।

this को स्वचालित रूप से बाइंड करने के लिए या तो handleFormSubmit को इसमें बदलें।

handleFormSubmit = (e) => {
  // .. your code
}

या कंस्ट्रक्टर में मैन्युअल रूप से this बाइंड करें

constructor() {
  // ..other code
  this.handleFormSubmit = this.handleFormSubmit.bind(this)
}
2
Paul 5 पद 2020, 12:00