如何將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
    };
}