我有一个简单的待办事项应用程序,其中我的redux商店包含一系列'todos'.我的'Todo'组件映射到商店中的每个'todo',并呈现使用redux-forms v6的'TodoForm'组件.
就像现在一样,每个'todo'都共享相同的表单名称/密钥,所以每次我在'title'字段中输入内容时,它都会改变每个待办事项的'标题'.我通过使用唯一的字段名称找到了一个解决方法,但我担心随着应用程序的增长,它会使事情变得复杂,并且更愿意使用唯一的表单名称,因此每个字段都可以具有相同的名称而不会干扰其他表单
(TodoForm1,TodoForm2,TodoForm3都可以有一个独特的'标题'字段,而不是包含'title1','title2','title3'字段的TodoForm.
我尝试访问TodoForm的道具,所以我可以将每个表单的键设置为组件的唯一ID,但似乎组件不会早期接收道具.
我也尝试制作一个立即调用的函数,它会吐出一个随机数,并使用该数字作为表单的名称,但这也无效.
如何通过我的所有待办事项映射并使用唯一的表单键呈现v6 redux-form?
这是app,console和redux devtools的图片.有3个'todos',但是只有一个表单连接它们todo-926,即使每个表单键应该是在一个立即调用的函数中随机生成的:
HomePageMainSection.index.js
renderTodos(todo) {
if (!todo) {
return <div>No Todos</div>;
}
return (
<div key={todo.get('id')}>
<Todo
todo={todo}
updateTodo={this.props.updateTodo}
deleteTodo={this.props.deleteTodo}
/>
</div>
);
}
render() {
if (!this.props.todos) {
return <div>No Todos</div>;
}
return (
<div className={styles.homePageMainSection}>
<h1>Hey I'm the Main Section</h1>
<div>
{this.props.todos.get('todos').map(this.renderTodos)}
</div>
</div>
);
}
Run Code Online (Sandbox Code Playgroud)
Todo.index.js:
renderTodo() {
if (this.state.editMode) {
return (
<TodoForm
todo={this.props.todo} changeTodoEditMode={this.changeTodoEditMode}
updateTodo={this.props.updateTodo}
/>
);
}
return (
<div className={styles.Todo} onClick={this.changeTodoEditMode}>
<div className="card card-block">
<h4 …Run Code Online (Sandbox Code Playgroud) 我有一个形式繁重的应用程序,我希望尽可能多地控制,同时使用尽可能少的依赖项.为此,我想利用redux-form v6的自定义Field组件API,并制作一堆我可以随意放入的自定义组件.其中一个组件是下拉选择.
问题是自定义下拉组件未连接到状态,即使它呈现正常.
在文档中,示例完成此操作:
<Field name="favoriteColor" component="select">
<option></option>
<option value="#ff0000">Red</option>
<option value="#00ff00">Green</option>
<option value="#0000ff">Blue</option>
</Field>
Run Code Online (Sandbox Code Playgroud)
我正在寻找一种即插即用的方法,我可以放入一个组件,并在道具中输入一组数据:
Form.js:
<div className="form-group">
<label htmlFor="dropDownSelect">Select an Option</label>
<Field
name="dropDownSelect"
component={DropDownSelect}
people={people}
className="form-control"
>
</Field>
</div>
Run Code Online (Sandbox Code Playgroud)
DropDownSelect.js:
import React from 'react';
import styles from './styles.css';
class DropDownSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function
renderSelectOptions = (person) => {
return (
<option key={person} value={person}>{person}</option>
);
}
render() {
return (
<select>
{this.props.people.map(this.renderSelectOptions)}
</select>
);
}
}
export default DropDownSelect;
Run Code Online (Sandbox Code Playgroud)
当我检查Redux DevTools时,字段的值在与下拉列表交互时永远不会填充:
我为两个字段选择了一个值,但只有'effDate'填充了一个值,而'dropDownSelect'仍然是一个没有值的注册字段.
编辑:
根据这个例子,我想这样做的方法就像:
function …Run Code Online (Sandbox Code Playgroud) 从我读到的内容看来,Docker-Compose是一个在单个主机上创建多个容器的工具,而Docker Swarm是一个工具,可以在Docker Stack的帮助下完成同样的操作,但具有更多的控制权和多个主机.我浏览了教程,也遇到了这个帖子:
docker-compose.yml与docker-stack.yml有什么区别?
我得出的结论是,当你可以将Docker Swarm与Docker Stack一起使用时,没有理由使用Docker-Compose.他们甚至可以使用相同的docker-compose.yml.
似乎Docker-compose出现在swarm和堆栈之前,可能是swarm + stack的新解决方案使得compose过时,但它仍然是遗留原因.这个想法是否正确?如果没有,Docker-Compose在开发或生产环境方面对Docker Swarm和Docker Stack有什么好处?
我有一个简单的反应 - 还原动力形式.我希望有一个form.container.tsx和一个form.component.tsx,其中form.container.tsx包含所有与redux状态的连接减去Field的连接.我正在尝试将我的容器包装在react-redux的connect中,然后将reduxForm包装在其中,看起来像TypeScript,redux-form和connect:
(理想)form.container.tsx:
interface DummyFormContainerProps {}
export const DummyFormContainer: React.SFC<DummyFormContainerProps> = props => {
const submitForm = (formValues: object) => {
alert(formValues);
};
return (
<DummyForm
onSubmit={submitForm}
/>
);
};
const mapStateToProps = (state: State) => ({});
const mapDispatchToProps = (dispatch: object) => {
return {};
};
const mergeProps = (stateProps: State, dispatchProps: object | null, ownProps: object | void) =>
Object.assign({}, stateProps, dispatchProps, ownProps);
const formConfiguration = {
form: 'dummy-form',
forceUnregisterOnUnmount: true
};
export default connect(mapStateToProps, …Run Code Online (Sandbox Code Playgroud) 反正有没有使用Django shell来修改字段值?我可以创建,删除和查询模型,但我不知道如何更改现有的字段值.
class Game(models.Model):
name = models.CharField(max_length=128, unique=True)
views = models.IntegerField(default=0)
likes = models.IntegerField(default=0)
slug = models.SlugField(unique=True)
def save(self, *args, **kwargs):
self.slug = slugify(self.name)
super(Game, self).save(*args, **kwargs)
def __str__(self):
return self.name
Run Code Online (Sandbox Code Playgroud)
在Django shell中,我试试Game.objects.get(name="testb").likes = 5,但是likes = 0当我Game.objects.get(name="testb").likes之后输入时它仍然会输出.
我的情况有 4 个组件,按以下顺序相互嵌套:Products(page)、ProductList、ProductListItem和CrossSellForm。
Products执行 graphql 查询(使用 urql),如下所示:
const productsQuery = `
query {
products {
id
title
imageSrc
crossSells {
id
type
title
}
}
}
`;
...
const [response] = useQuery({
query: productsQuery,
});
const { data: { products = [] } = {}, fetching, error } = response;
...
<ProductList products={products} />
Run Code Online (Sandbox Code Playgroud)
products返回一个Products包含字段的数组crossSells,该字段返回 的数组CrossSells。Products向下传播到CrossSellForm,其中包含返回 的数组的突变查询CrossSells。
问题是,当我提交 …
第一次使用gulp,我正在关注一些似乎不适合我的教程.我有一个真正的基础项目,我只想学习如何使用gulp进行标准的事情,如js/css缩小,图像缩小和浏览器同步.
当我使用browserSync运行我的监视任务时,它会转到localhost:8000的右侧URL,但它显示"无法获取/"而不是呈现我的页面.我如何解决这个问题,以便我可以将browserSync与Django一起使用?
文件目录:
gulpfile:
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('sass', function() {
return gulp.src('polls/static/polls/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('polls/static/polls/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('browserSync', function() {
browserSync.init({
server: "mysite",
port: 8000
});
});
gulp.task('watch', ['browserSync', 'sass'], function() {
gulp.watch('polls/static/polls/scss/**/*.scss', ['sass']);
})
Run Code Online (Sandbox Code Playgroud) 我正在使用Create-React-App,我希望使用webpack 2.0支持的动态import()来导入基于变量字符串的模块.
我查看了官方提案(https://github.com/tc39/proposal-dynamic-import),似乎可以这样做:
import(`./language-packs/${navigator.language}.js`)
Run Code Online (Sandbox Code Playgroud)
但是当我尝试类似的东西时,它会破裂.
AppRoutes.js
import LazyLoad from 'services/LazyLoad';
export class AppRoutes extends React.Component {
render() {
return (
<Switch>
<Route
exact path="/"
render={(matchProps) => (
<LazyLoad
absoluteModulePath='pages/default/HomePage'
getComponent={() => import('pages/default/HomePage')}
{...matchProps}
/>
)}
/>
</Switch>
);
}
}
export default AppRoutes;
Run Code Online (Sandbox Code Playgroud)
页/默认/首页/ index.js
import React from 'react';
export const HomePage = () => {
return (
<div>
I'm the default HomePage
</div>
);
}
export default HomePage;
Run Code Online (Sandbox Code Playgroud)
BROKEN 服务/ LazyLoad/index.js
import React from 'react';
export class …Run Code Online (Sandbox Code Playgroud) 我有一张表格,显示姓名,等级和积分.当我将鼠标悬停在它们上时行会改变颜色,当我单击每一行时,它会添加"活动"类.我的CSS规则选择"活动"类,为其提供边框和新的背景颜色.边框有效,但背景颜色没有.
我知道jquery正在工作,因为当我点击该行时,它会根据我设置的CSS规则添加黑色边框,但背景只是转动并保持纯白色.我也检查了firebug,它显示了被添加到点击行的活动类,但颜色仍然没有改变.我现在不担心切换点击,因为我只想清除第一步.
我搜索了一些其他推荐添加的旧帖子!重要,但这也没有用.
HTML
<tr class="row-data">
<td class="name">player</td>
<td class="points">points</td>
<td class="rank"><p id="rank">Rank1</p></td>
</tr>
Run Code Online (Sandbox Code Playgroud)
CSS
.row-data .active {
border: 2px solid black;
background-color: red !important;
Run Code Online (Sandbox Code Playgroud)
}
jQuery的
$(function() {
var limegreen = '#73f302';
var white2 = '#eef4cc';
var transitionTime = '0.5s'
var $rankTable = $('.rank-table');
var $rowData = $rankTable.find('.row-data');
function rowHighlight() {
var rowID = $(this)
rowID.css({
'background-color': limegreen,
'transition-property': 'background-color',
'transition-duration': transitionTime,
});
};
function rowDelight() {
var rowID = $(this)
rowID.css({
'background-color': white2,
'transition-property': 'background-color',
'transition-duration': transitionTime,
}); …Run Code Online (Sandbox Code Playgroud) 我已经读过,每次使用'with'时都会调用对象的__ enter __()和__ exit __()方法.我理解,对于用户定义的对象,您可以自己定义这些方法,但我不明白它如何适用于内置对象/函数,如"open"甚至是测试用例.
此代码按预期工作,我假设它使用__ exit __()关闭文件:
with open('output.txt', 'w') as f:
f.write('Hi there!')
Run Code Online (Sandbox Code Playgroud)
要么
with self.assertRaises(ValueError):
remove_driver(self.driver) # self refers to a class that inherits from the default unittest.TestCase
Run Code Online (Sandbox Code Playgroud)
然而,当我检查它时,对任一对象都没有__ enter __()或__ exit __()方法:
那么'开放'如何与'同时'合作?不应该支持上下文管理协议的对象__输入__()和__ exit __()方法定义和检查吗?
它似乎是一个我想念的简单参数,但我无法弄清楚究竟是什么.
这是我用'@ sendgrid/mail'发送的请求:
email.js:
const sgMail = require('@sendgrid/mail');
function emailRequest() {
msg = {
to: 'test+10@gmail.com
from: 'info@owner.io',
subject: 'Receipt for Business Expenses',
template_id: 'db6d11ae-41e4-4e1a-a71b-f5368eb21c9c',
personalizations: [
{
to: 'test+10@gmail.com,
from: 'info@ownr.io,
subject: 'Receipt for Business Expenses,
template_id: 'db6d11ae-41e4-4e1a-a71b-f5368eb21c9c',
substitutions: {
':firstname': 'Bobba',
':ordernumber': 'WHAAA',
':orderdate': 'today',
':ordertime': 'NOW!',
},
custom_args: {
':firstname': 'Bobba',
':ordernumber': 'WHAAA',
':orderdate': 'today',
':ordertime': 'NOW!',
},
},
],
sub: {
':firstname': 'Bobba',
':ordernumber': 'WHAAA',
':orderdate': 'today',
':ordertime': 'NOW!',
},
substitutions: {
':firstname': 'Bobba',
':ordernumber': 'WHAAA', …Run Code Online (Sandbox Code Playgroud) 我正在制作这个小网络应用程序,它需要 2 个地址,使用谷歌地图计算距离,并根据车辆 mpg 等级计算汽油成本。除了我认为最适合 AJAX 的最后一部分之外,一切都已完成。
我有 3 个列表(年份、品牌、型号),我需要根据汽车的年份和品牌来限制车型列表。选择后,我有一个按钮,一旦点击,将验证它是否是数据库中的有效车辆,并提取车辆的 mpg 等级以对其进行一些基本数学运算。
问题是我真的不知道如何解决这个问题。在过去的几个小时里,我搜索了一些查询,我得到了很多与模型表单和 Django 选择字段相关的东西,如果我不需要,我不想进入。我的想法是只更改innerText/value,然后根据我的django 数据库检查它。
我也从 SO 那里看到了这个答案:
并且对此感到有些困惑。如果我理解正确,AJAX GET 请求将在 javascript 对象中提取数据,就像我作为用户访问该 url 一样。这是否意味着我可以创建另一个 html 模板并将数据库中的每辆车发布到该页面上,我可以从中提取信息并从中创建我的动态列表?
寻找最直接的方法来使用 ajax 动态生成我的列表,并使用我的数据库验证年份、品牌和型号,然后将返回汽车的 mpg。
模型.py:
class Car(models.Model):
year = models.IntegerField(default=0)
make = models.CharField(max_length=60)
model = models.CharField(max_length=60)
mpg = models.IntegerField(default=0)
def __str__(self):
return ("{0} {1} {2}".format(self.year, self.make, self.model))
Run Code Online (Sandbox Code Playgroud)
views.py:(目前只是列出每辆车,无法现场验证车辆)
def index(request):
context_dic = {}
car_list = Car.objects.order_by('make')
car_list_model = Car.objects.order_by('model')
context_dic['car_list'] = car_list
context_dic['years'] = []
context_dic['makes'] = …Run Code Online (Sandbox Code Playgroud) javascript ×6
reactjs ×5
python ×4
django ×3
redux-form ×3
redux ×2
ajax ×1
browser-sync ×1
build-tools ×1
caching ×1
colors ×1
css ×1
docker ×1
docker-swarm ×1
dynamic-list ×1
email ×1
field ×1
forms ×1
graphql ×1
gulp ×1
html ×1
html-select ×1
jquery ×1
models ×1
module ×1
node.js ×1
sendgrid ×1
shell ×1
templates ×1
typescript ×1
urql ×1
webpack ×1