React Autosuggest onSuggestionSelected -获取选定选项

Question

我刚开始使用React，并且一直在使用React Autosuggest (我喜欢它)，我已经实现了99%。

也就是说，我根本不知道如何使用onSuggestionSelected获得用户最终选择的值：

https://github.com/moroshko/react-autosuggest#on-suggestion-selected-prop

我的代码基于文档中的这个非常简单的示例：

https://github.com/moroshko/react-autosuggest/blob/master/demo/src/components/App/components/Examples/components/Basic/Basic.js

任何帮助都将不胜感激。

下面是我当前的代码：

=========================================

import Autosuggest from 'react-autosuggest';
import schoolnames from '../data/SchoolNames';

const getSuggestions = value => {
    const inputValue = value.trim().toLowerCase();
    const inputLength = inputValue.length;
    return inputLength === 0 ? [] : schoolnames.filter(school =>
        school.name.toLowerCase().slice(0, inputLength) === inputValue
    );
};

const getSuggestionValue = suggestion => suggestion.name;
const renderSuggestion = suggestion => (
    <div>
    {suggestion.name}
    </div>
);

const onSuggestionSelected = suggestion => {
    console.log('ping... ', suggestion)
}


class SchoolNameLookup extends React.Component {

    constructor() {
        super();

        this.state = {
            value: '',
            suggestions: []
        };
    }

    handleChange = (event, { newValue }) => {
        this.setState({ value: newValue });
    };

    onChange = (event, { value }) => {
        alert(value)
    };

    onSuggestionsFetchRequested = ({ value }) => {
        this.setState({
            suggestions: getSuggestions(value)
        });
    };

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

    render() {
        const { value, suggestions } = this.state;

        const inputProps = {
            placeholder: 'Type a School Name...',
            value: value,
            onChange: this.handleChange
        };

        return (

            <div>

                <Autosuggest id="SchoolNameLookup"
                    suggestions={suggestions}
                    onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                    onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                    getSuggestionValue={getSuggestionValue}
                    renderSuggestion={renderSuggestion}
                    onSuggestionSelected={onSuggestionSelected}
                    inputProps={inputProps}
                />

            </div>



        );
    }
}



export default SchoolNameLookup

Answer 1

import React from 'react';
import Autosuggest from 'react-autosuggest';

const schoolnames = [{
    id:1,
    name: 'test',
},{
    id:2,
    name: 'test2',
},{
    id:4,
    name: 'test4',
},{
    id:3,
    name: 'test3',
}]

const getSuggestions = value => {
    const inputValue = value.trim().toLowerCase();
    const inputLength = inputValue.length;
    return inputLength === 0 ? [] : schoolnames.filter(school =>
        school.name.toLowerCase().slice(0, inputLength) === inputValue
    );
};

const getSuggestionValue = suggestion => suggestion.name;
const renderSuggestion = suggestion => (
    <div>
    {suggestion.name}
    </div>
);

class SchoolNameLookup extends React.Component {

    constructor() {
        super();

        this.state = {
            value: '',
            suggestions: []
        };
    }

    onSuggestionSelected = (event, { suggestion, suggestionValue, index, method }) => {
        event.preventDefault();
        console.log('ping... ', suggestion)
    }

    handleChange = (event, { newValue }) => {
        this.setState({ value: newValue });
    };

    onChange = (event, { value }) => {
        alert(value)
    };

    onSuggestionsFetchRequested = ({ value }) => {
        this.setState({
            suggestions: getSuggestions(value)
        });
    };

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

    render() {
        const { value, suggestions } = this.state;

        const inputProps = {
            placeholder: 'Type a School Name...',
            value: value,
            onChange: this.handleChange
        };

        return (
            <div>
                <Autosuggest id="SchoolNameLookup"
                    suggestions={suggestions}
                    onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                    onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                    getSuggestionValue={getSuggestionValue}
                    renderSuggestion={renderSuggestion}
                    onSuggestionSelected={this.onSuggestionSelected}
                    inputProps={inputProps}
                />
            </div>
        );
    }
}

export default SchoolNameLookup;

试试这个方法。我取了样本数据，因为你没有提到数据。

你将在suggestion-ping控制台中获得整个对象。