【发布时间】：2017-09-29 15:33:09
【问题描述】：
我有几天一直在解决的问题，我的管理员正在处理休息实施。我们有一个要求，让我们的过滤器输入表现得更像“包含”而不是“相等”
我的 API 支持这样的查找，在 GET 上，通过在您的输入中传递 % 字符（例如 /app?foo=%25bar%25 返回 foo 类似于 %bar% 的应用）
虽然在理想情况下，我可以告诉我的用户在过滤器的 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);【问题讨论】：
-
您可以发布您的自定义
TextInput吗？ -
欢迎来到 Stack Overflow！请花一些时间阅读帮助页面，尤其是Stack Overflow question checklist 部分。您可能还想了解Minimal, Complete, and Verifiable Examples
-
用一个例子更新了问题
-
并且，为了真正解决我的问题，我不想让我的自定义组件做我需要的事情，我想要一些关于我应该如何尝试完成我想要做的事情的方向做。