小编Nic*_*cci的帖子

如何实现 Material UI DatePicker 和 TimePicker?值未定义

我习惯于提高状态,但这个值来自组件 DatePicker & TimePicker,我怎么可能将它提升到父组件或事件读取它在组件 DatePicker & TimePicker 被调用?

我正在关注亚历克斯的实施。console.log(this.state.date this.state.time)投掷undefined

import React from "react";
import DateFnsUtils from "@date-io/date-fns";
import "./PickerBackdrop.css";
import {
  DatePicker,
  TimePicker,
  DateTimePicker,
  MuiPickersUtilsProvider
} from "@material-ui/pickers";

class PickerDrawer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      date: null,
      time: null
    };
    this.handleDate = this.handleDate.bind(this);
    this.handleTime = this.handleTime.bind(this);
  }
  handleTime(event, time) {
    this.setState({ time: time });
  }

  handleDate(event, date) {
    this.setState({ date: date });
  }

  render() {
    return (
      <div>
        <MuiPickersUtilsProvider utils={DateFnsUtils}> …
Run Code Online (Sandbox Code Playgroud)

reactjs

1
推荐指数
1
解决办法
3608
查看次数

如何排序此组件图?反应

我了解如何单独使用javascript进行排序,但我使用了一个教程来创建此Notes组件列表,而且我不知道在不干扰地图的情况下进行排序。

我没有尝试太多,我只是无法想象在哪里按renderDate(date)排序

import React from "react";
import { Link } from "react-router-dom";
import dayjs from "dayjs";

import "./plan-list.css";

function renderDate(date) {
  let d = dayjs(date);
  return d.format("MMMM D YYYY, HH:mm");
}

const Note = ({ note: { _id, title, body, updatedAt, date } }) => (
  <Link to={`/notes/${_id}`}>
    <div className="notes-list-item">
      <h2>{title}</h2>
      <span className="notes-list-date">{renderDate(date)}</span>
    </div>
  </Link>
);

export default ({ notes }) => (
  <div className="notes-list">
    {notes.map(none => (
      <Note note={none} key={`note-${none._id}`} />
    ))}
  </div>
);
Run Code Online (Sandbox Code Playgroud)

这样,但在哪里? …

javascript reactjs

1
推荐指数
1
解决办法
38
查看次数

React Fetch Google Cloud Function http cors req.method OPTIONS, POST

节省时间并跳过回答

我的 axios 'GET' 有什么问题this.props.profile.id从 正确登录到控制台react-redux-firebase,但那是另一回事了。

...

const response = await axios.get(
  "https://us-central1-thumbprint-1c31n.cloudfunctions.net/listCharts",
  { 'seatsioid': this.props.profile.id }
);
Run Code Online (Sandbox Code Playgroud)

还是云函数标题?

const functions = require('firebase-functions');
//const admin = require('firebase-admin');
const { SeatsioClient } = require('seatsio')
const cors = require('cors')
//admin.initializeApp(functions.config().firebase);


// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
exports.listCharts = functions.https.onRequest(async(req, res) => {
  cors(req, res, async () => {
    res.set('Access-Control-Allow-Origin', 'https://1c31n.csb.app');
    //res.set('Access-Control-Allow-Credentials', 'true');

    res.set('Access-Control-Allow-Methods', 'GET');
    res.set('Access-Control-Allow-Headers', 'Content-Type', 'X-Requested-Width', 'Accept', 'seatsioid')
    res.set('Access-Control-Max-Age', '60'); …
Run Code Online (Sandbox Code Playgroud)

javascript cors firebase reactjs google-cloud-functions

1
推荐指数
2
解决办法
1331
查看次数