将多个文件的内容合并为一个以作为Redux的配置后,我遇到了错误配置的Redux的问题.
如何解决store,同时将其保存在一个文件中?
未处理的JS异常:无法在"Connect(App)"的上下文或道具中找到"store".将根组件包装在a中,或者将"store"显式传递为"Connect(App)"的prop.
'use strict';
import React, { Component } from 'react';
import { createStore, applyMiddleware, combineReducers, bindActionCreators } from 'redux';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';
import * as screenActions from './redux/actions/screenActions';
import * as reducers from './redux/stores/reducers';
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);
import RootContainer from './redux/views/containers/rootContainer';
class App extends Component {
render() {
const { state, actions } = this.props;
return (
<Provider store={store}> …Run Code Online (Sandbox Code Playgroud) 我编写了我的代码,当用户双击一个<td>元素时,我:
<input>的type="text"这里是我的问题:
如果用户双击<td>,然后点击了另一个<td>不按回车,我需要最初<td>的<input>被重置为以前的值.
// Selecting the table <th> odd elements
$("#div table td").dblclick(function(){
var currentEle = $(this);
var value = $(this).html();
updateVal(currentEle, value);
});
function updateVal(currentEle, value)
{
$(currentEle).html('<input class="thVal" type="text" value="'+value+'" />');
$(".thVal").focus();
$(".thVal").keyup(function(event){
if(event.keyCode == 13){
$(currentEle).html($(".thVal").val().trim());
}
});
$('body').not(".thVal").click(function(){
if(('.thVal').length != 0)
{
$(currentEle).html($(".thVal").val().trim());
}
});
}
Run Code Online (Sandbox Code Playgroud)
请帮我.我不想使用jeditable数据表.
我试图在我的应用程序中添加一个状态,当一些事件通过时,它只保存了一个布尔值.我无法弄清楚我在这里做错了什么.
减速器:
import * as actionTypes from '../constants/action-types.js';
const initialState = [{
eventPassed: false
}];
export default function eventPassed(state = initialState, action) {
switch (action.type) {
case actionTypes.EVENT_PASSED:
return true;
default:
return state;
}
}
Run Code Online (Sandbox Code Playgroud)
行动:
import * as actionTypes from '../constants/action-types';
export function eventPassed(eventPassed) {
return {
type: actionTypes.EVENT_PASSED,
payload: { eventPassed: eventPassed }
};
}
Run Code Online (Sandbox Code Playgroud)
组件周围的容器:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Example from …Run Code Online (Sandbox Code Playgroud) JSX部分看起来像这样:
<span className="header_srh_i_c" onMouseDown={this.toggleSearchbar}>
<i className="fa fa-search"
id="searchButton"
name="searchButton"
/>
</span>
Run Code Online (Sandbox Code Playgroud)
同一组件中的函数如下所示:
toggleSearchbar(event){
const eventType = event.type;
if(this.state.showSearch && this.props.q && length(this.props.q) > 0){
this.toggleSearching();
}else{
console.log("state after", this.state.showSearch) //false
this.setState({showSearch:!this.state.showSearch},function (event) {
console.log("state after", this.state.showSearch) //false
})
}
}
Run Code Online (Sandbox Code Playgroud)
false执行后状态仍为事件
this.setState({showSearch:!this.state.showSearch},function (event) {
console.log("state after", this.state.showSearch) //false
})
Run Code Online (Sandbox Code Playgroud)
但是,如果我使用onClick而不是,它的工作正常onMouseDown
在我的React应用程序中,我有一些函数,我希望能够访问几个类似的组件...但是,我想绑定this到共享函数,以便他们可以做更新组件状态的事情等等...然而,似乎导入函数然后尝试以this"典型的"React方式绑定不起作用.
以下是我想要完成的内容的说明 - 在这种情况下,单击呈现的按钮将从导入的共享函数文件中调用该函数并更新组件状态:
//shared_functions.js
const sharedFunctions = {
testFunction = () => {
this.setState({functionWasRun: true})
}
}
//MyComponent.jsx
import React, { Component } from 'react';
import sharedFunctions from '../static/scripts/shared_functions.js';
let { testFunction } = sharedFunctions;
class MyComponent extends Component {
constructor(props){
super(props);
this.testFunction = this.testFunction.bind(this)
this.state = {
functionWasRun: false
}
}
render(){
return(
<div>
<button onClick={this.testFunction}>Click</button>
</div>
)
}
}
Run Code Online (Sandbox Code Playgroud)
尝试按原样运行此代码将返回如下错误:
Uncaught (in promise) TypeError: Cannot read property 'bind' of undefined
我得到了所有关于......但我想知道的是:是否可以绑定this到 …
许多文章都提到Container Components用于获取数据和调度动作.演示组件是用来定义如何将数据呈现.它还表明容器组件永远不应该有自己的风格.
这是一个问题:
我有3个演示组件,全部由1个容器组件使用.容器组件获取数据并向每个表示组件提供所需的数据.
我可以将容器组件中的表示组件包装和样式化以用于样式目的.例如,我想将演示组件的样式设置为在网格中使用渲染?
我正在尝试设置 Redux + React Router 应用程序。我认为问题出在 ImmutableJS 上,但我不明白如何解决它。
客户端.js
import { fromJS } from 'immutable'
import React from 'react'
import { render, unmountComponentAtNode } from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { Provider } from 'react-redux'
import { match, Router, browserHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import { createStore, combineReducers, compose, applyMiddleware } from 'redux'
import { routerReducer, routerMiddleware } from 'react-router-redux'
function createSelectLocationState(reducerName) {
let prevRoutingState;
let prevRoutingStateJS;
return (state) => {
const …Run Code Online (Sandbox Code Playgroud) 我觉得我可能在MDN文档或其他东西中错过了一些非常简单的东西,但我已经挖了一段时间了,我不知道.
有没有办法以类似于方法的方式调用函数?这基本上就是我要做的事情:
function addItem(itemName, quality, quantity /*, arr*/) {
arr.push([itemName, quality, quantity]);
}
var someArr = [['item', 1, 1]];
someArr.addItem('someOtherItem', 2, 3);
// someArr === [['item', 1, 1], ['someOtherItem', 2, 3]]Run Code Online (Sandbox Code Playgroud)
现在,请注意,我不是要创建构造函数或将变量定义为函数.此外,我完全清楚我可以简单地将数组作为参数添加并正常调用该函数.我想要完成的是以一种方式运行一个函数,当它被标记为数组方法时,将以指定的方式影响该数组.我怎样才能做到这一点?我可以这样做吗?
尤其是在SPA中,使用表单标签似乎是多余的,在SPA中,刷新页面的默认操作比功能更受阻碍:为什么只包含标签e.preventDefault()以防止每次使用时都会阻止其默认行为?
任何表单行为都可以通过组合输入标签,本地组件/应用程序状态和方法来处理。
表单提交可以由输入/受控输入本身的处理程序处理,而输入/受控输入本身又调用某些中央表单提交方法。
我在创建动态表单组件(输入和类型是从对象动态构建)时尝试过的,没有明显的缺点。
我的问题是:由于所处的环境输入标签被配置为肝卵圆细胞,其事件如的onChange,的onClick和onkeydown事件处理大部分的事件(如表单提交的事件就像当按键被按下回车提交)和其值由国家控制:
是否有任何原因为什么要忽略在ReactJS中使用表单标签来构建表单是一个坏主意?
如何获得具有特定名称的html标签的所有子项?
我们假设我有一个<div>看起来像这样的东西
<div id=test>
<input name=test1/>
<input name=test2/>
</div>
Run Code Online (Sandbox Code Playgroud)
如果我有div元素,我怎样才能得到名为test1或test2的孩子?我试过了
div.getElementsByName('test1')
Run Code Online (Sandbox Code Playgroud)
但那不起作用?
javascript ×7
reactjs ×7
redux ×4
html ×2
react-redux ×2
ecmascript-6 ×1
function ×1
jquery ×1
methods ×1
react-native ×1
react-router ×1