如何将React MD自动完成功能与Redux集成在一起？

Question

我想将react-md与redux集成在一起，但是我不明白如何触发onAutocomplete函数。 现在，我只想从Action中获取一些硬编码的数据，稍后我将添加api调用并将搜索文本作为参数。

这是我要分派的硬编码数据的操作：

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
    };
}

这是减速器：

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;

这是组件

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);

您可能已经注意到， onAutocomplete函数与该组件的作用域不同……所以我想这就是为什么它不会被触发的原因。 首先，我只需要从操作中获取数据-一旦我在自动完成文本框中键入内容，谢谢。

Answer 1

从react-md docs ：

onAutocomplete ：当使用鼠标，Enter /空格键或触摸单击自动完成建议时调用的可选功能。

等等onAutocomplete仅在您选择建议时调用。 这不是您想要的。 您正在寻找的是onChange道具：

onChange ：当自动完成的文本字段值更改时调用的可选函数。

在这里您可以找到一个简单的示例代码： https : //codesandbox.io/s/muddy-cdn-l85sp

Answer 2

您可以将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>
);

然后，在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
    };
}