Question

我有一个问题，我已经工作了几天，我的管理员正在休息实施。我们有一个请求要求我们的过滤器输入更像是“包含”而不是“相等”

我的API在GET上支持这样的查找，通过输入输入％字符（例如/ app？foo =％25bar％25返回foo就像％bar％的应用程序）

在一个理想的世界中，我可以告诉我的用户在过滤器的TextInput字段中提供％s，大众不会因插入特殊字符而烦恼。

所以，我的问题是，我可以在哪里注入一些内容来包装输入对象中输入的通配符？

我尝试重新实现TextInput并更新OnChange，render等上的input.value，但是restClient仍在使用预先更改的输入值。

继承我在自定义inputComponent上的破解

class ContainsTextProps {
    public addField?: PropTypes.bool.isRequired = true;
    public elStyle?: PropTypes.object;
    public input?: PropTypes.object;
    public isRequired?: PropTypes.bool;
    public label?: PropTypes.string;
    public meta?: PropTypes.object;
    public name?: PropTypes.string;
    public options?: PropTypes.object = {};
    public resource?: PropTypes.string;
    public source?: PropTypes.string;
    public type?: PropTypes.string = 'text';
    public onBlur?: PropTypes.func = () => {};
    public onChange?: PropTypes.func = () => {};
    public onFocus?: PropTypes.func = () => {};
}
class ContainsTextInputInternal extends React.Component<ContainsTextProps, {}> {
    constructor(props) {
        super(props);
        this.handleBlur = this.handleBlur.bind(this);
        this.handleFocus = this.handleFocus.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    public handleBlur = (eventOrValue) => {
        // this.props.onBlur(eventOrValue);
        this.props.input.onBlur(eventOrValue);
    }

    public handleFocus = (event) => {
        // this.props.onFocus(event);
        this.props.input.onFocus(event);
    }

    public handleChange = (eventOrValue, newvalue) => {
        // this.props.onChange(eventOrValue);
        this.props.input.onChange(eventOrValue, newvalue);
    }


    public render() {
        const {
            elStyle,
            input,
            label,
            meta: { touched, error },
            options,
            type,
        } = this.props;

        if (input && input.value && input.value.length > 0 && input.value.indexOf('%') < 0) {
            input.value = `%${input.value}%`;
        }

        return (
            <TextField
                {...input}
                onBlur={this.handleBlur}
                onFocus={this.handleFocus}
                onChange={this.handleChange}
                type={type}
                // floatingLabelText={<FieldTitle label={label} source={source} resource={resource} isRequired={isRequired} />}
                floatingLabelText={label}
                errorText={touched && error}
                style={elStyle}
                value={input.value}
                {...options}
            />
        );
    }
}

export const ContainsTextInput = pure(ContainsTextInputInternal);

Answer 1

您需要的是一个自定义REST客户端，它可以检测查询并将特殊字符注入输入。

https://marmelab.com/admin-on-rest/RestClients.html#writing-your-own-rest-client

这应该让你开始。如果您只有一个特殊情况，您只需要注入特殊字符，那么您也可以使用REST包装器。

https://marmelab.com/admin-on-rest/RestClients.html#decorating-your-rest-client-example-of-file-upload

admin on rest：注入格式更改以过滤输入

1 个答案: