我有一个待办事项列表,并希望如果用户点击"完成",则将数组中该项目的状态设置为"完成".
这是我的行动:
export function completeTodo(id) {
return {
type: "COMPLETE_TASK",
completed: true,
id
}
}
这是我的减速机:
case "COMPLETE_TASK": {
return {...state,
todos: [{
completed: action.completed
}]
}
}
我遇到的问题是新状态不再具有与所选项目上的待办事项关联的文本,并且ID不再存在.这是因为我覆盖了州并忽略了之前的属性吗？我的对象项onload看起来像这样:
Objecttodos: Array[1]
0: Object
completed: false
id: 0
text: "Initial todo"
__proto__: Object
length: 1
__proto__: Array[0]
__proto__: Object
如您所见,我想要做的就是将完成的值设置为true.
我有一个排序过滤器,它采用一个数组来填充选项.试图看到该选项value等于数组中的文本,但我在标题中得到错误:
Invalid attempt to destructure non-iterable instance
我需要将文本作为选项标记中的值传递,以便在用户更新过滤器时,正确的文本显示给用户所做的选择.
这是我的代码:
function Sorting({by, order, rp}: SortingProps) {
const opts = [
['Price (low)', 'price', 'asc'],
['Price (high)', 'price', 'desc'],
['Discount (low)', 'discount', 'asc'],
['Discount (high)', 'discount', 'desc'],
['Most popular', 'arrival', 'latest'],
['Most recent', 'arrival', 'latest'],
];
const onChange = (i) => {
const [text, by, order] = opts[i];
refresh({so: {[by]: order}});
/* GA TRACKING */
ga('send', 'event', 'My Shop Sort By', text, 'Used');
};
return (
<div className={cn(shop.sorting, rp.sorting.fill && …我的表单上的提交按钮有启用和禁用状态.
条件如下:
如果已输入所有输入字段且有效,则启用提交按钮.
如果尚未输入某些字段,请不要启用提交按钮.
到目前为止,验证是在onkeyup事件中完成的,并且仅适用于第一个输入:
//Custom onkeyup validation
onkeyup: function(element) {
//Check if input is empty remove valid class from parent
var formInput = $(element),
formInputParent = $(element).parent('fieldset');
if(formInputParent.hasClass('form--valid') && formInput.val() === "") {
formInputParent.removeClass('form--valid');
}
//Check if all fields are not empty to remove submit--disabled class
var formInputs = $('form').find(':input');
console.log(formInputs);
formInputs.each(function(){
if(formInputs.length > 0) {
formInputs.parents('form').find('.submit-form').removeClass('submit--disabled');
}
});
}
点击这里查看演示
在整个用户旅程中输入新数据时，如何更新本地存储项或对象的某些属性，并且不会丢失之前输入的内容或用户决定更新？
我的 5 个容器之旅包括要求用户输入以下内容：
在第一个视图中，我创建了本地存储对象/项目，用于在函数中设置名称handleSubmit。
处理提交（事件）{ event.preventDefault（）;
//Profile object
let profile = { 'name': this.state.name, 'avatar': null, 'genres': '' };
// Put the object into storage
localStorage.setItem('profile', JSON.stringify(profile));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('profile');
//Log object
console.log('retrievedObject: ', JSON.parse(retrievedObject));
//On form submission update view
this.props.history.push('/profile/hello');
}
在我的第二个视图中，我只想更新avatar属性并保留用户在前一个视图中输入的内容。
我在 handleSelect 函数中执行此操作，如下所示：
handleSelect(i) {
let selectedAvatarId;
let avatars = this.state.avatars;
avatars = avatars.map((val, index) => {
val.isActive = index === i …我收到一个奇怪的错误：
Unhandled rejection Error: EACCES: permission denied, mkdir '/home/ubuntu/.npm/_cacache/index-v5/14/36'atus
我只是在AWS实例上安装了npm（6.4.1）和节点（11.2.0），没有任何问题。我在全球范围内安装了create-react-app。错误说This is an error with npm itself.
我有点茫然。我创建了目录/home/ubuntu/.npm/_cacache/index-v5/14，但仍然无法成功。我显然拥有/ home / ubuntu并具有写权限。
看来sudo成功了。为什么呢？
编辑：ubuntu：ubuntu拥有当前目录和父目录（我在/ home / ubuntu / workspace中）
我正在为我的客户开发自定义电子邮件签名,我现在正处于GMail,Hotmail,Brinkster等测试阶段.
我很难尝试删除锚点显示的下划线,我确实有"text-decoration:none;" 在锚本身,没有任何东西适用于任何一个客户端,但是,Outlook呈现正常.
有人可以帮忙吗？:-)
我有一个包含ASP.NET表单的弹出窗口,单击"请求信息"链接,将出现该表单.
但是,具有触发弹出窗口的"请求信息"链接的页面具有大量内容,因此需要滚动才能看到该链接.
div如果用户滚动阅读内容,我需要始终居中,否则如果他们不滚动弹出窗口仍然显示在屏幕中心.
在div绝对定位,整个页面宽度960px与边距设置为0 auto.
我需要找到包含不超过两个不同数字的数组的最大切片.
这是我的阵列 [1, 1, 1, 2, 2, 2, 1, 1, 2, 2, 6, 2, 1, 8]
我的思考过程就是找到不重复的数字并在新数组中返回它们的索引.
这是我到目前为止:
function goThroughInteger(number) {
var array = [];
//iterate the array and check if number is not repeated
number.filter(function (element, index, number) {
if(element != number[index-1] && element != number[index+1]) {
array.push(index);
return element;
}
})
console.log(array);
}
goThroughInteger([1, 1, 1, 2, 2, 2, 1, 1, 2, 2, 6, 2, 1, 8]);
我不确定下一步该去哪里,我很难理解存在的问题 - 找到包含不超过两个不同数字的最大切片 - 这让我感到困惑.
如何使用React Router v4获取当前路径？
我尝试了以下无济于事：
const currentLocation = this.props.location.pathname;
错误： Cannot read property 'pathname' of undefined
这是我的Routes.js文件：
import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import configureStore from './Store';
import LevelOne from './containers/LevelOne';
import LevelTwo from './containers/LevelTwo';
import LevelThree from './containers/LevelThree';
import CreateProfile from './containers/Profile/CreateProfile';
import WhosWatching from './containers/Profile/WhosWatching';
import ProfileNameAvatar from './containers/Profile/ProfileNameAvatar';
import FavouriteGenres from './containers/Profile/FavouriteGenres';
import FourZeroFour from './containers/404';
import Header from './components/Header';
const store = …我正在尝试在我的React + Webpack项目上运行SASS编译并继续遇到此错误:
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin
遵循本教程中的指导原则:链接
这是我的webpack.config.js
有什么建议？
const debug = process.env.NODE_ENV !== "production";
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/client.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
} …