管理员休息：注入格式更改以过滤输入

Question

我已经解决了几天的问题，我的管理员正在休息实施。我们收到了一个请求，要求我们的过滤器输入表现得更像 "contains" 而不是 "equal"

我的 API 支持这样的查找，在 GET 上，通过在您的输入中传递 % 字符（例如 /app?foo=%25bar%25 returns 应用程序，其中 foo 类似于 %栏)

虽然在理想情况下，我可以告诉我的用户在过滤器的 TextInput 字段中提供 %s，但大多数人都不会因为插入特殊字符而烦恼。

所以，我的问题是，我可以在哪里注入一些东西来将通配符包裹在我对象中的对象中输入的输入周围？

我已尝试重新实现 TextInput 并在 OnChange、渲染等上更新 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

这应该可以帮助您入门。如果您只有 1 种特殊情况，您只需要注入特殊字符，那么您也可以使用 REST 包装器。

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

管理员休息：注入格式更改以过滤输入

admin on rest: inject format change to filter input

admin-on-rest

react-admin