reactjs - Redux 状态不会根据输入而改变
问题描述
在从带有注册、登录和主页的 react redux 教程中学习了一点之后,我开始制作一个 react 应用程序。我正在使用 redux 来处理状态,当我在登录页面的输入字段中键入时,状态没有更新。
在常量.js
export const USER_LOGGED_IN = 'USER_LOGGED_IN';
在 action.js 中
import * as constants from './constants';
export const userLoggedIn = (text) => ({
type: constants.USER_LOGGED_IN,
payload: text
});
在 reducer.js 中
import * as actionName from "./constants";
const initialStateLoggedIn = {
email: "",
};
export const userLoggedInReducer = ( state = initialStateLoggedIn, action = {} ) => {
switch (action.type) {
case actionName.USER_LOGGED_IN:
return {
...state,
email: action.payload,
};
default:
return state;
}
};
在 index.js 中
import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import thunkMiddleware from "redux-thunk";
import { createLogger } from "redux-logger";
import { userLoggedInReducer } from "./reducers";
import { composeWithDevTools } from "redux-devtools-extension";
const logger = createLogger();
const rootReducers = combineReducers({ userLoggedInReducer });
const store = createStore(
rootReducers,
composeWithDevTools(applyMiddleware(thunkMiddleware, logger))
);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
在 SignIn.js 中
import { connect } from "react-redux";
import { userLoggedIn } from "./../../actions";
const mapStateToProps = state => {
console.log(`mapStateToProps: ${state.userLoggedInReducer.email}`); //I think this is where it reads the input real time?
return { email: state.userLoggedInReducer.email };
};
const mapDispatchToProps = dispatch => {
return {
onEmailFilled: event =>
dispatch(userLoggedIn(event.target.signin_email.value))
};
};
render() {
const { email, onEmailFilled } = this.props;
console.log(`Hello ${email}`);
return{
<form ......
<InputComponent
id_name="signin_email" //this is the name attribute
input_label="Email"
input_type="email"
function="{onEmailFilled}" //can I pass onEmailFilled like this?
/>
.......
export default connect( mapStateToProps, mapDispatchToProps)(SignIn);
}
在 InputComponent.js 中
import React, { Component } from "react";
class InputComponent extends Component {
render() {
return (
<div className="measure mt4 mt4-1 mt4-m mt4-ns">
<label htmlFor={this.props.id_name} className="f6 b db mb2">
{this.props.input_label}
{this.props.isOptional ? (
<span className="normal black-60">(optional)</span>
) : null}
</label>
<input
id={this.props.id_name}
name={this.props.id_name}
className="input-reset ba b--black-20 pa2 mb2 db w-100 lh-copy lh-copy-l lh-copy-m lh-copy-ns"
type={this.props.input_type}
autoComplete="on"
onChange={this.props.function} //passed from SignIn.js
/>
</div>
);
}
}
export default InputComponent;
我有 redux chrome 扩展,我知道我应该去那里调试而不是使用 console.log,但我最终会随着我的进步而学习。在 mapStateToProps 和 render() console.log 中,当我输入输入元素时,它们没有返回任何内容。
我错过了什么导致这个应用程序没有改变状态?一些解释会很好,这样我就可以更多地理解 react redux。谢谢你。
解决方案
在 SignIn.js 中
render() {
const { email, onEmailFilled } = this.props;
console.log(`Hello ${email}`);
return{
<form ......
<InputComponent
id_name="signin_email" //this is the name attribute
input_label="Email"
input_type="email"
emailFilled={onEmailFilled}
/>
.......
在 InputComponent.js 中
<input
id={this.props.id_name}
name={this.props.id_name}
className="input-reset ba b--black-20 pa2 mb2 db w-100 lh-copy lh-copy-l lh-copy-m lh-copy-ns"
type={this.props.input_type}
autoComplete="on"
onChange={this.props.emailFilled}
我设法通过进行一些小改动来解决它。Redux 扩展也显示了更新。解决了。
推荐阅读
- vba - 如何将单词转换为链接到同一文档中书签的超链接?
- javascript - 一元运算符使用正则表达式拆分
- c# - 有没有办法让 Newtonsoft Json 更短?
- python - 如何处理 CSV 字典中的“缺失键值”并通过 Pandas 数据框工作?
- arduino - 按下按钮旋转图像
- python-3.x - 我正在尝试对同时具有 string 和 int 的嵌套字符串进行舍入
- rust - 是否可以在 rust 中重载 String 类型的 add 运算符?
- ios - NotificationService Extension 返回与 App 目标不同的语言环境
- python - 如何在 Tkinter Canvas 上配置动态创建的矩形?
- asp.net-mvc - Asp Net Mvc:可以从Partial View返回JSON数据吗?