[英]How to integrate React MD autocomplete with redux?
I want to integrate react-md with redux, but I don't understand how to trigger the onAutocomplete
function. 我想将react-md与redux集成在一起,但是我不明白如何触发
onAutocomplete
函数。 For now I only want to get some hard coded data from the Action, later on I'll add an api call and the search text as parameter. 现在,我只想从Action中获取一些硬编码的数据,稍后我将添加api调用并将搜索文本作为参数。
Here is my action with the hard coded data that I want to dispatch: 这是我要分派的硬编码数据的操作:
export const searchCityAutoComplete = () => {
// no need for text parameter to search at this point
const users = [{
id: '1',
name: 'Robin',
}, {
id: '2',
name: 'Yan',
}]
return {
type: "AUTOCOMPLETE_SEARCH",
payload: users
};
}
Here is the reducer: 这是减速器:
const initState = {
searchResults: [],
}
const sitesReducer = (state = initState, action) => {
switch (action.type) {
case "AUTOCOMPLETE_SEARCH":
state = {
...state,
searchResults: action.payload
}
break;
default:
return state;
}
return state;
}
export default sitesReducer;
And here is the component 这是组件
import React from 'react';
import { connect } from 'react-redux';
import { searchCityAutoComplete } from '../actions/sitesActions';
import Autocomplete from 'react-md/lib/Autocompletes';
const SearchAutocomplete = ({ searchResults, onAutocomplete }) => (
<div >
<div className="md-text-container" style={{ marginTop: "10em" }}>
<Autocomplete
id="test-autocomplete"
label="Autocomplete"
dataLabel="name"
autocompleteWithLabel
placeholder="Search Users"
data={searchResults}
onAutocomplete={(...args) => {
searchCityAutoComplete(args)
console.log(args);
}}
deleteKeys={[
"id",
]}
simplifiedMenu={false}
anchor={{
x: Autocomplete.HorizontalAnchors.CENTER,
y: Autocomplete.VerticalAnchors.TOP
}}
position={Autocomplete.Positions.BOTTOM}
/>
</div>
</div>
);
const mapStateToProps = state => {
console.log(state)
return {
searchResults: state.sitesReducer.searchResults,
}
}
const mapDispatchToProps = dispatch => ({
onAutocomplete: () => { dispatch(searchCityAutoComplete()) }
})
export default connect(mapStateToProps, mapDispatchToProps)(SearchAutocomplete);
As you probably notice, the onAutocomplete
function isn't in the same scope as the component... so I guess that's why it's not triggered. 您可能已经注意到,
onAutocomplete
函数与该组件的作用域不同……所以我想这就是为什么它不会被触发的原因。 For a starting point I just need to get the data from the action - once I type in the autocomplete text box...thanks. 首先,我只需要从操作中获取数据-一旦我在自动完成文本框中键入内容,谢谢。
From react-md
docs : 从
react-md
docs :
onAutocomplete : An optional function to call when an autocomplete suggestion is clicked either by using the mouse, the enter/space key, or touch.
onAutocomplete :当使用鼠标,Enter /空格键或触摸单击自动完成建议时调用的可选功能。
And so onAutocomplete
is only called when you select a suggestion. 等等
onAutocomplete
仅在您选择建议时调用。 And it's not what you're looking for. 这不是您想要的。 What you're looking for is the
onChange
prop : 您正在寻找的是
onChange
道具:
onChange : An optional function to call when the Autocomplete's text field value changes.
onChange :当自动完成的文本字段值更改时调用的可选函数。
Here you can find a simple example code : https://codesandbox.io/s/muddy-cdn-l85sp 在这里您可以找到一个简单的示例代码: https : //codesandbox.io/s/muddy-cdn-l85sp
You can just pass your onAutocomplete
action straight into Autocomplete
component: 您可以将
onAutocomplete
操作直接传递给Autocomplete
组件:
const SearchAutocomplete = ({ searchResults, onAutocomplete }) => (
<div>
<div className="md-text-container" style={{ marginTop: "10em" }}>
<Autocomplete
id="test-autocomplete"
label="Autocomplete"
dataLabel="name"
autocompleteWithLabel
placeholder="Search Users"
data={searchResults}
onAutocomplete={onAutocomplete} // Pass the action from props here
deleteKeys={[
"id",
]}
simplifiedMenu={false}
anchor={{
x: Autocomplete.HorizontalAnchors.CENTER,
y: Autocomplete.VerticalAnchors.TOP
}}
position={Autocomplete.Positions.BOTTOM}
/>
</div>
</div>
);
Then in mapDispatchToProps
you'll need to accept autocomplete value and do a search on it or set it to reducer: 然后,在
mapDispatchToProps
您需要接受自动完成值并对其进行搜索或将其设置为reducer:
const mapDispatchToProps = dispatch => ({
onAutocomplete: (value) => dispatch(searchCityAutoComplete(value))
})
export const searchCityAutoComplete = (value) => {
// do smth with the value
const users = [{
id: '1',
name: 'Robin',
}, {
id: '2',
name: 'Yan',
}]
return {
type: "AUTOCOMPLETE_SEARCH",
payload: users
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.