如何在 Material UI 中使用 Autosuggest

Question

我正在尝试在 Material UI 中使用自动建议。我在 componentDidMount 方法中设置了自己的数据。 是否有正确或更好的方法来设置数据，而不是作为 props 传入并在建议数组中设置？

调用组件：

<IntegrationAutosuggest  placeHolder="Search the data " data={this.state.options} onSelect={this.handleSuggestionSelected}/>

我正在使用来自https://material-ui.com/demos/autocomplete/ 的 react-autosuggest 示例，但添加了 componentDidMount 方法。

 let suggestions = [];
//     { label: 'Afghanistan' },
//     { label: 'Aland Islands' },
//     { label: 'Brunei Darussalam' },
// ];

function renderInputComponent(inputProps) {
    const { classes, inputRef = () => {}, ref, ...other } = inputProps;

    return (
        <TextField
            className={classes.textField}
            fullWidth
            variant="outlined"
            InputProps={{
                inputRef: node => {
                    ref(node);
                    inputRef(node);
                },
                classes: {
                    input: classes.input,
                },
            }}
            {...other}
        />
    );
}

function renderSuggestion(suggestion, { query, isHighlighted }) {
    const matches = match(suggestion.label, query);
    const parts = parse(suggestion.label, matches);

    return (
        <MenuItem selected={isHighlighted} component="div">
            <div>
                {parts.map((part, index) =>
                        part.highlight ? (
                            <span key={String(index)} style={{ fontWeight: 500 }}>
              {part.text}
            </span>
                        ) : (
                            <strong key={String(index)} style={{ fontWeight: 300 }}>
                                {part.text}
                            </strong>
                        ),
                )}
            </div>
        </MenuItem>
    );
}

function initSuggestions(value) {
    suggestions = value;
}

function getSuggestions(value) {
    const inputValue = deburr(value.trim()).toLowerCase();
    const inputLength = inputValue.length;
    let count = 0;

    return inputLength === 0
        ? []
        : suggestions.filter(suggestion => {
            //console.log('suggestion is:'+suggestion.label);
            //console.log(!suggestion.label);

            const keep =
                count < 5 && suggestion.label && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;

            if (keep) {
                count += 1;
            }

            return keep;
        });
}

function getSuggestionValue(suggestion) {
    return suggestion.label;
}

function onSuggestionSelected(event, { suggestion, suggestionValue, suggestionIndex, sectionIndex, method }) {
    console.log('HandleSuggestion() '+suggestionValue);
}

const styles = theme => ({
    root: {
        height: 50,
        flexGrow: 1,
    },
    container: {
        position: 'relative',
    },
    suggestionsContainerOpen: {
        position: 'absolute',
        zIndex: 998,
        marginTop: theme.spacing.unit,
        left: 0,
        right: 0,
    },
    suggestion: {
        display: 'block',
    },
    suggestionsList: {
        margin: 0,
        padding: 0,
        listStyleType: 'none',
    },
    divider: {
        height: theme.spacing.unit * 2,
    },
});

class IntegrationAutosuggest extends React.Component {
    state = {
        single: '',
        popper: '',
        suggestions: [],
    };

    componentDidMount() {
        initSuggestions(this.props.data);
    }

    handleSuggestionsFetchRequested = ({ value }) => {


        this.setState({
            suggestions: getSuggestions(value),
        });
    };

    // handleSuggestionSelected = (event, { suggestion, suggestionValue, suggestionIndex, sectionIndex, method }) => {
    //     console.log(suggestionValue + ' Selected!');
    // };

    handleSuggestionsClearRequested = () => {
        this.setState({
            suggestions: [],
        });
    };

    handleChange = name => (event, { newValue }) => {
        this.setState({
            [name]: newValue,
        });
    };

    render() {
        const { classes } = this.props;
        console.log('Re-render!!');
        console.log(this.props);
        console.log(this.state.suggestions);

        const autosuggestProps = {
            renderInputComponent,
            suggestions: this.state.suggestions,
            onSuggestionsFetchRequested: this.handleSuggestionsFetchRequested,
            onSuggestionsClearRequested: this.handleSuggestionsClearRequested,
            onSuggestionSelected: this.props.onSelect,
            getSuggestionValue,
            renderSuggestion,
        };

        return (
            <div className={classes.root}>
                <Autosuggest
                    {...autosuggestProps}
                    inputProps={{
                        classes,
                        placeholder: this.props.placeHolder,
                        value: this.state.single,
                        onChange: this.handleChange('single'),
                    }}
                    theme={{
                        container: classes.container,
                        suggestionsContainerOpen: classes.suggestionsContainerOpen,
                        suggestionsList: classes.suggestionsList,
                        suggestion: classes.suggestion,
                    }}
                    renderSuggestionsContainer={options => (
                        <Paper {...options.containerProps} square>
                            {options.children}
                        </Paper>
                    )}
                />
                <div className={classes.divider} />


            </div>
        );
    }
}

IntegrationAutosuggest.propTypes = {
    classes: PropTypes.object.isRequired,

};

export default withStyles(styles)(IntegrationAutosuggest);

Answer 1

有很多方法...您可以保持suggestionList 状态，将其初始化为空，然后使用fetch 查询更新它，并将搜索字符串作为参数。或者您可以在构造函数的数组中获取所有可搜索内容的完整列表，然后根据搜索字符串进行过滤。