在同一页面上使用相同的ReactJS表单组件
Working with the same ReactJS form component on the same page
我对reactJS还很陌生,我想知道在一个页面上处理相同表单组件的最佳方法是什么。请记住,我正在使用flux,组件正在与商店对话。
例如:<搜索表单/><SearchForm/>
当我尝试使用表单#1输入字段时,表单#2同时从表单#1获得值。我认为问题出在商店里。组件正在与同一个存储对话,并且存储正在同时更新所有组件。
我该如何处理这个问题?
这是我目前掌握的代码。
const SearchField = React.createClass({
propTypes: {
isSearchActivated: React.PropTypes.bool.isRequired,
},
_onChange() {
var previousHighlightedIndex = this.state.highlightedIndex;
this.setState(getStateFromStores(), function() {
if (previousHighlightedIndex == 0 &&
this.state.highlightedIndex == -1) {
this.refs.SearchBar.selectAll();
}
});
},
componentDidMount() {
if (window.location.pathname == "/" && !Modernizr.mq("screen only and (max-width: 768px)")) {
$(ReactDOM.findDOMNode(this.refs.SearchBar)).find("input").focus();
}
},
componentWillUnmount() {
SearchResultStore.removeChangeListener(this._onChange);
},
onChangeSearchString(e) {
SearchResultsUtils.search(e.target.value);
},
onBlur(e) {
var self = this;
var cb = function() {
if (!self.state.selectedResult && self.state.results.length) {
self.handleSelectedResult(0);
}
SearchResultsActions.disallowResultsDisplay();
};
if($(".search-bar").hasClass("active")) {
$(".search-bar.active").removeClass("active");
}
},
onFocus(e) {
$(ReactDOM.findDOMNode(this.refs.SearchBar)).closest(".search-bar").addClass("active");
},
handleSubmit() {
var self = this;
},
render() {
var className = "search-bar clearfix";
return (
<div className={className}>
<div className="search-bar-search">
<SearchBar
searchString={this.state.searchString}
onChange={this.onChangeSearchString}
onKeyDown={this.onKeyDownSearchString}
onFocus={this.onFocus}
onBlur={this.onBlur}
placeholder="Search Meds or Conditions"
ref="SearchBar" />
</div>
<SearchButton
handleSubmit={this.handleSubmit} />
</div>
);
},
});
module.exports = SearchField;
感谢您提前提供的帮助。
毫无疑问,您可以在整个应用程序中多次重用组件。
1.如果您不想有任何状态:
在您的情况下,您可以提供表单提交处理程序作为回调道具。如果您不想在搜索表单上保留任何状态。例如对于表格1
<Searchform submitHandler={searchForm1Handler}/>
对于中2
<Searchform submitHandler={searchForm2Handler}/>
以及在您的搜索表单组件内部
render(){
return (
<form id="searchform" onSubmit={this.props.submitHandler} role="form">
// other input and buttons
</form>
)
}
2.有状态
通过这种方法,每个组件都将有自己独立的状态,这些状态对它们来说是私有的。
下面是示例组件来说明这个
import React ,{ Component } from 'react';
export default class SearchForm extends Component {
constructor(props){
super(props);
this.state = {
searchTerm : ''
};
this.submit = this.submit.bind(this);
this.changeSearchTerm = this.changeSearchTerm.bind(this);
}
submit(e){
e.preventDefault();
let searchTerm = this.state.searchTerm;
//Now perform some action based on search term you get
}
changeSearchTerm(e){
this.setState({searchTerm :e.target.value});
}
render(){
return(
<div>
<div className="row">
<div className="col-md-12">
<form role="form" className="form-horizontal" onSubmit={this.submit}>
<fieldset>
<div className="form-group">
<div className="col-sm-6">
<input id="st" type="text" placeholder="search term" onChange={this.changeSearchTerm} value={this.state.searchTerm} required autofocus/>
</div>
</div>
<div className="form-group">
<div className="col-xs-12 text-center">
<button className="btn">
Search
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
)
}
}
现在使用
对于表格1
<Searchform/>
对于中2
<Searchform/>
组件可以维护内部状态数据(通过该.state访问)
它允许您将<SearchForm />#1
和value1
以及<SearchForm />#2
和value2
存储在this.state
中
要生成表单,请选中此项:https://facebook.github.io/react/docs/forms.html
看起来您的商店只为一个表单保存一个状态,其中包括搜索值。
如果两次呈现此表单,则两个表单在每次更改时都会检索到相同的状态。因此,它们在设计上完全是彼此的复制品。如果一个表单发生更改,两个表单都会注意到更改,并且两个表单将从存储中检索完全相同的状态。
为了解决这个问题,我建议:
- 更改存储,使其可以保存多个表单的状态,每个表单都有自己的ID
- 将该ID作为道具传递给每个表单,例如
<SearchForm formID='form1'/> <SearchForm formID='form2'/>
- 将
formID
作为道具传递给表单的所有子级,例如<SearchField>
- 在
<SearchField>
中,确保您的组件仅从其自己的formID
中呈现状态。您可能需要更新getStateFromStores()
方法本身。或者在<SearchField>
内部先过滤掉相关内容,然后再将其传递给setState()
- 当您的组件通知存储发生了更改时(我想
SearchResultsUtils.search(e.target.value);
就是这样做的),那么您也需要传递formID
。因此,商店将知道要更新哪个表单
PS:我认为您的代码在componentDidMount()
中缺少了一些行:您有删除侦听器以存储更改的代码,但添加侦听器的代码丢失了。组件中缺少调用_onChange()
方法的代码。
- 在reactjs组件中预加载数据
- ReactJS组件中显示的视频未更新
- 当写入“;函数“;在ReactJS组件中
- 外部js文件中的Reactjs组件有时不会加载
- 将数据传回父组件的ReactJS组件无法工作
- Reactjs组件与onClick同时更新
- 谷歌地图标记作为Reactjs组件
- 通过“;类“"实例”;使用ReactJS组件代替“props”文字
- 将类对象传递给ReactJS组件
- 当将reactjs组件作为节点模块导出到npm时,我包括jsx还是js
- 简单的 reactjs 组件渲染无效 - 原因
- Reactjs 组件之间的通信
- 显示/隐藏 ReactJS 组件而不会丢失其内部状态
- 从该组件外部更新已渲染的 ReactJS 组件的正确方法
- 构建 ReactJS 组件,其中兄弟姐妹组件需要通信
- 传达两个 reactJS 组件
- ReactJs组件体系结构
- 在reactjs组件中将日期格式化为长
- 如何向 ReactJS 组件添加多个类
- ReactJS组件函数