如何将 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

您可以直接将 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
    };
}

Answer 2

来自 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 仅在您 select 提出建议时调用。这不是你要找的。您正在寻找的是 onChange 道具：

onChange : An optional function to call when the Autocomplete's text field value changes.

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

如何将 React MD 自动完成与 redux 集成？

How to integrate React MD autocomplete with redux?

reactjs

redux

react-md