Question

我AutocompleteInput包装了ReferenceInput。就我而言，One Project有很多账户。在编辑帐户页面上，我将项目设置为可用并保存。

<ReferenceInput source="project_id" reference="projects" allowEmpty filterToQuery={searchText => ({ query_content: searchText })}>
  <AutocompleteInput optionText="title" />
</ReferenceInput>

现在我需要为值null设置project_id。它甚至可以按下我可以放置在AutocompleteInput附近，但我不知道如何设置值直接到redux。最好我想避免API的特殊http请求来重置此字段。谢谢！

Answer 1

我刚接受了AutocompleteInput并附加到它按钮以清除字段。并调用NullableAutocompleteInput。然后也像早期粘贴到ReferenceInput

<ReferenceInput source="field_id" reference="resources" allowEmpty filterToQuery={searchText => ({ query_title: searchText })}>
          <NullableAutocompleteInput optionText={(choice) => optionRenderer(choice, 'Resource', 'title')} />
        </ReferenceInput>

和整个代码组件

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AutoComplete from 'material-ui/AutoComplete';

import BackspaceIcon from 'material-ui/svg-icons/content/backspace';
import IconButton from 'material-ui/IconButton';

import {FieldTitle} from 'admin-on-rest';
import {translate} from 'admin-on-rest';

export class NullableAutocompleteInput extends Component {
    handleNewRequest = (chosenRequest, index) => {
        if (index !== -1) {
            const { choices, input, optionValue } = this.props;
            input.onChange(choices[index][optionValue]);
        }
    }

    getSuggestion(choice) {
        const { optionText, translate, translateChoice } = this.props;
        const choiceName = typeof optionText === 'function' ? optionText(choice) : choice[optionText];
        return translateChoice ? translate(choiceName, { _: choiceName }) : choiceName;
    }

    clearData() {
        this.props.input.onChange(null);
    }

    render() {
        const {
            choices,
            elStyle,
            filter,
            input,
            isRequired,
            label,
            meta: { touched, error },
            options,
            optionValue,
            resource,
            setFilter,
            source,
        } = this.props;

        const selectedSource = choices.find(choice => choice[optionValue] === input.value);
        const dataSource = choices.map(choice => ({
            value: choice[optionValue],
            text: this.getSuggestion(choice),
        }));
        return (
            <div>
            <AutoComplete
                searchText={selectedSource && this.getSuggestion(selectedSource)}
                dataSource={dataSource}
                floatingLabelText={<FieldTitle label={label} source={source} resource={resource} isRequired={isRequired} />}
                filter={filter}
                onNewRequest={this.handleNewRequest}
                onUpdateInput={setFilter}
                openOnFocus
                style={elStyle}
                errorText={touched && error}
                {...options}
            />
            <IconButton onTouchTap={this.clearData.bind(this)} tooltip="Clear Data" tooltipPosition="top-right">
                <BackspaceIcon color='grey' hoverColor='black'/>
            </IconButton>
            </div>
        );
    }
}

NullableAutocompleteInput.propTypes = {
    addField: PropTypes.bool.isRequired,
    choices: PropTypes.arrayOf(PropTypes.object),
    elStyle: PropTypes.object,
    filter: PropTypes.func.isRequired,
    input: PropTypes.object,
    isRequired: PropTypes.bool,
    label: PropTypes.string,
    meta: PropTypes.object,
    options: PropTypes.object,
    optionElement: PropTypes.element,
    optionText: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.func,
    ]).isRequired,
    optionValue: PropTypes.string.isRequired,
    resource: PropTypes.string,
    setFilter: PropTypes.func,
    source: PropTypes.string,
    translate: PropTypes.func.isRequired,
    translateChoice: PropTypes.bool.isRequired,
};

NullableAutocompleteInput.defaultProps = {
    addField: true,
    choices: [],
    filter: AutoComplete.fuzzyFilter,
    options: {},
    optionText: 'name',
    optionValue: 'id',
    translateChoice: true,
};

export default translate(NullableAutocompleteInput);

如何为AutocompleteInput / ReferenceInput设置空值？

1 个答案: