小编Sub*_*jit的帖子

如何使用moment.js从日期列表中获取最小或最大日期?

我想从handleClick函数中给出的日期列表中获取最大日期.如何使用moment.js从日期列表中找到最大日期?

我有以下代码:

import React, {Component} from 'react';
import moment from 'moment';

class Getdate extends Component
{
  constructor() {
    super();
    this.state = {
       dates = []
    }
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
     this.state.dates = ['2017-11-12', '2017-10-22', '2015-01-10', '2018-01-01', '2014-10-10'];
     console.log(this.state.dates);
  }
  render{
    return (
     <button onClick={this.handleClick}>Get Max Date</button>
    )
  }
}
export default Getdate
Run Code Online (Sandbox Code Playgroud)

javascript maxdate momentjs reactjs

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

Material-ui抽屉宽度问题

我遇到了 Material-ui 抽屉的问题。我改变了抽屉容器的宽度,这导致了一个问题。抽屉保留在页面内部一点并且可见,但我不想在没有单击按钮时使其在页面上可见。现在转换属性可能有问题。

所以我将其更改为transform:translate(350px, 0px),但随后我遇到了另一个问题,那就是如果我单击按钮,抽屉不会显示。对这件事有什么帮助吗?

我已经找到解决方案并编辑了代码。

我在这里创建了一个演示 =>看看

还分享了以下代码:

索引.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Drawer from 'material-ui/Drawer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

class App extends Component {
  constructor() {
    super();
    this.state = {
      openDrawer: false
    };
  }

  toggleDrawer() {
    this.setState({
      openDrawer: !this.state.openDrawer
    });
  }

  render() {
    return (
      <MuiThemeProvider>
      <div>
        <button onClick={this.toggleDrawer.bind(this)}> Toggle Drawer</button>
        <Drawer 
                  open={this.state.openDrawer}
                  containerClassName={!this.state.openDrawer? "hide-drawer": "show-drawer" }
                  openSecondary={true} …
Run Code Online (Sandbox Code Playgroud)

javascript css reactjs material-ui react-component

11
推荐指数
3
解决办法
5万
查看次数

自定义材质-ui popover

我想给 material-ui popover 提供如下图所示的形状。

在此处输入图片说明

我已经使用 react 创建了 popover 工作演示并共享了链接以进行编辑。有什么帮助吗?=>工作演示

我也在此处共享代码,但如果将 stackblitz 工作演示用于编辑目的,那就太好了:

import React, { Component } from 'react';
import Popover, {PopoverAnimationVertical} from 'material-ui/Popover';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

const PopoverStyle = {
    top: '50px'
};

class App extends Component {

  constructor(props) {
        super(props);
        this.state = { pop_open: false };
    }

  handleProfileDropDown(e) {
        e.preventDefault();
        this.setState({
            pop_open: !this.state.pop_open,
            anchorEl: e.currentTarget,
        }); …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs css-shapes material-ui react-component

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

只希望使用 react-places-autocomplete 建议城市和相关国家

我只想在建议中获得城市和相关国家/地区,同时在 react-places-autocomplete 的搜索字段中输入内容。我尝试使用searchOptions道具并把{{type: ['(cities)', '(country)']}}放在那里,但没有用。为了使事情像这样工作,我应该在那里使用什么?有人遇到过同样的问题吗?有什么帮助吗?

以下是我的代码:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete';

const isObject = val => {
  return typeof val === 'object' && val !== null;
};

const classnames = (...args) => {
  const classes = [];
  args.forEach(arg => {
    if (typeof arg === 'string') {
      classes.push(arg);
    } else if (isObject(arg)) {
      Object.keys(arg).forEach(key …
Run Code Online (Sandbox Code Playgroud)

javascript google-maps google-places-api google-places reactjs

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

在react.js中上传后如何从onChange函数获取视频时长

我想在 react.js 上传后从 onChange 函数获取视频时长。我已经在 stackblitz 中分享了我的代码。链接在这里 -工作演示

我在代码中提到我需要获取视频时长。我在 onchange 函数的reader.onloadend部分需要它。这是我在以下部分给出的代码:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      get_video: '',
      videoAttribute: []
    };
  }

  chosenVideo(e) {
        e.preventDefault();

        /*this.setState({
            file_state: e.target.files[0]
        });*/

        var file = e.target.files[0];
        var file_state = e.target;
        var reader = new FileReader();
        reader.onloadend = () => {
            this.setState({
                get_video: reader.result, …
Run Code Online (Sandbox Code Playgroud)

javascript onchange filereader reactjs video-upload

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

片刻Js日期比较

我想使用moment.js检查当前日期是否在从07-11-2017到05-01-2018之间的日期之间有效.

任何帮助?怎么做?

我有以下代码:

import React, {Component} from 'react';
import moment from 'moment';

class Dates extends Component {
  constructor() {
    super();
    this.state = {
      dateNow: moment(),
      availability:''
    }
  }
  componentDidMount() {
    let startdate = moment("17-11-2017");
    let enddate = moment("05-01-2018");

    this.setState({
      availability: 'Yes'
    });
  }
  render() {
    return(
       <div>
         <div>{this.state.dateNow}</div>
         <table>
           <tr>
             <td>Available from 7th November,2017 to 5th January,2018?</td> 
             <td>{this.state.availability}</td>
           </tr>
          </table>
       </div>
    );
  }
}
export default Dates;
Run Code Online (Sandbox Code Playgroud)

javascript date momentjs reactjs

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

图像预览在反应中不起作用

我正在尝试以下图像预览。每当 onChange 函数ImagePreview被调用时,change 函数都没有响应。运行console.log("outside readURL")后它被卡住了。我无法弄清楚为什么会发生这种情况。有什么帮助吗?

import React, { Component } from 'react'; 

class ImagePreview extends Component {
   constructor(props) {
     super(props);
     this.state = { images_attributes: [], imgSrc:'' };
   }
   fileUpload() {
     $("#new_post_image").click();
   }
   imageChange() {
    function readURL(input) {
      console.log("bla");
      var file = this.state.images_attributes[0].files[0];
      if(this.state.images_attributes[0].files[0]) {
        var reader = new FileReader();
        // var url = reader.readAsDataURL(file.name);

        console.log(file);

        // console.log(reader);

        reader.onloadend = () => {
          console.log(reader);
          console.log(reader.result);
        }
      }
    }

    console.log("outside readURL");
    $("#new_post_image").change(function() {
      console.log("above readURL");
      readURL(this); …
Run Code Online (Sandbox Code Playgroud)

javascript image onchange onclick reactjs

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