如何使用自动建议作为 TextInput？

Question

我正在尝试将 autosuggest (react-autosuggest) 作为 TextInput。 它作为 TextField 工作，但是当我尝试在 SimpleFormLayout 中使用它时，自动建议输入没有发送任何数据。

我的输入在哪里使用：

const CardEdit = ({ record } = this.props) => (
    <Card>
        <SimpleFormLayout record={record}>
            <TextInput label="fields.id" source="id" />
            <AutoSuggestInput label="fields.title" source="title" />
        </SimpleFormLayout>
    </Card>
)

输入值好像没有被正确读取，你知道为什么吗？

Answer 1

我的自动建议输入：

class AutoSuggestInput extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            value: String(initValue),
            suggestions: [],
        }

        this.lastRequestId = null
        this.selected = null

        this.renderInputComponent = this.renderInputComponent.bind(this)
        this.onSuggestionsFetchRequested = this.handleSuggestionsFetchRequested.bind(this)
        this.onSuggestionsClearRequested = this.handleSuggestionsClearRequested.bind(this)
        this.getSuggestionValue = this.getSuggestionValue.bind(this)
        this.onSuggestionSelected = this.onSuggestionSelected.bind(this)
    }

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

        return (
            <TextField
                fullWidth
                InputProps={{
                    inputRef: node => {
                        ref(node)
                        inputRef(node)
                    },
                    classes: {
                        root: classes.inputRoot,
                        input: classes.inputInput,
                    },
                    disableUnderline: true,
                }}
                {...other}
            />
        )
    }

    getSuggestionValue(suggestion) {
        return suggestion.id
    }

    // eslint-disable-next-line no-unused-vars
    renderSuggestion(suggestion, { query, isHighlighted }) {
        return (
            <div>
                {suggestion.label}
            </div>
        )
    }

    handleSuggestionsFetchRequested = ({ value }) => {
        // Cancel the previous request
        if (this.lastRequestId !== null) {
            clearTimeout(this.lastRequestId)
        }

        this.lastRequestId = setTimeout(() => {
            // fetch
        }, 500)
    }

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

    handleChange = () => (event, { newValue, method }) => {
        if (method === 'click') return
        this.setState({
            value: newValue,
        })
        this.selected = null
    }

    onSuggestionSelected = (event, { suggestion }) => {
        this.selected = suggestion.id
    }

    render() {
        const {
            classes,
            translate,
        } = this.props

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

        return (
            <div>
                <Autosuggest
                    {...autosuggestProps}
                    inputProps={{
                        classes,
                        placeholder: translate('search') + '...',
                        value: this.selected ? String(this.selected) : this.state.value,
                        onChange: this.handleChange(),
                    }}
                    getSectionSuggestions={section => section.items}
                />
            </div>
        )
    }
}

const enhance = compose(
    withStyles(styles),
    translate,
)

export default enhance(AutoSuggestInput)