我想从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) 我遇到了 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) 我想给 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) 我只想在建议中获得城市和相关国家/地区,同时在 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
我想在 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) 我想使用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) 我正在尝试以下图像预览。每当 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 ×7
reactjs ×7
material-ui ×2
momentjs ×2
onchange ×2
css ×1
css-shapes ×1
date ×1
filereader ×1
google-maps ×1
image ×1
maxdate ×1
onclick ×1
video-upload ×1