javascript - 为什么我的输入框在用户输入方面表现得很奇怪?
问题描述
我很困惑为什么我不能输入任何东西<input onChange={this.handleArticleId} value={this.props.articleIdValue} placeholder="article id"/>
。如果我确实输入了某些内容,然后单击submit
,则该字母才会出现在输入框中。我以前从未见过的行为类型。
我做错了什么以及如何解决这个问题?
这是SearchArticle
:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actionType from '../../store/actions/actions';
class SearchArticle extends Component {
constructor(props) {
super(props);
this.state = {
flag: false,
idVal: '',
cityCodeval: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleArticleId = this.handleArticleId.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
console.log("IDValue --> " + this.state.idVal);
this.props.articleIdValueRedux(this.state.idVal);
}
handleChange = event => {
this.setState({value: event.target.value});
this.props.CityCodeReducerRedux(event.target.value);
}
handleArticleId = event => {
event.preventDefault();
this.setState({idVal: event.target.value});
}
displayName = () => {
console.log("this.props.articleIdValue = " + this.props.articleIdValue);
return(
<div>
<p>author name: {this.props.authorNameValue}</p>
<p>article text: {this.props.storyTextValue}</p>
</div>
);
}
render() {
return(
<div>
<form onSubmit={this.handleSubmit}>
<input onChange={this.handleChange} value={this.props.cityCodeValue} type="text" placeholder="city code"/>
<input onChange={this.handleArticleId} value={this.props.articleIdValue} placeholder="article id"/>
<button type="submit" value="Search">Submit</button>
{this.state.flag ? this.displayName() : null}
</form>
</div>
);
}
}
const mapStateToProps = state => {
return {
cityCodeValue: state.cityCodeValue.cityCodeValue,
authorNameValue: state.authorNameValue.authorNameValue,
articleIdValue: state.articleIdValue.articleIdValue,
storyTextValue: state.storyTextValue.storyTextValue
};
};
const mapDispatchToProps = dispatch => {
return {
CityCodeReducerRedux: (value) => dispatch({type: actionType.CITY_CODE_VALUE, value}),
articleIdValueRedux: (value) => dispatch({type: actionType.ARTICLE_ID_VALUE, value})
};
};
export default connect(mapStateToProps, mapDispatchToProps)(SearchArticle);
这里是ArticleIdReducer
import * as actionType from './actions/actions';
const initialState = {
articleIdValue: ''
};
const ArticleIdReducer = (state = initialState, action) => {
switch (action.type) {
case actionType.ARTICLE_ID_VALUE:
return {
...state,
articleIdValue: action.value
};
default:
return state;
}
};
export default ArticleIdReducer;
解决方案
您正在使用handleArticleId
但使用this.props.articleIdValue
值来更新本地组件状态。
要么使用本地状态的值,要么提升状态并将处理程序传递给父级。
我看到您正在使用redux
,因此您需要将值存储在redux
商店中并为其创建相关的操作和减速器。
推荐阅读
- git - 如何创建一个从原始版本继承更新的复制 git 存储库
- matlab - 在矩阵行中创建三叉树场景
- dependency-injection - 解析单例泛型,其中 T 是实现接口的控制器
- spring-boot - 在 Spring boot 1.5.2 版本中,Actuator 端点未通过 HTTP 暴露在与应用程序运行相同的端口中
- python - 如何格式化'7'以产生'007'
- linux - nginx 在哪里打开他的文件描述符?
- python-3.x - libQt5MultimediaQuick.so.5:无法打开共享对象文件:没有这样的文件或目录
- pug - 为什么我的哈巴狗模板中的这个对象作为属性不正确,但作为原始文本正确工作?
- javascript - 如何通过悬停时的视频更改图像
- templates - Chef::Exceptions::FileNotFound: 模板[/var/www/html/index.html]