2017-09-29 4 views
0

私は数日で作業していましたが、残りの管理者には問題があります。フィルタ入力を「等しい」よりも「含む」のように動作させるように要求しましたadmin on rest:フィルタ入力への書式変更の挿入

My APIはGETのように、入力に%文字を渡すことでそのようなルックアップをサポートします?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);

+0

カスタム「TextInput」を投稿できますか? – Gildas

+1

ようこそスタックオーバーフロー!ヘルプページ、特に[Stack Overflow question checklist](http://meta.stackexchange.com/q/156810/204922)のセクションを読んでください。 [最小、完全、および検証可能な例](http://meta.stackexchange.com/q/156810/204922) – Guenther

+0

についての質問を –

答えて

0

で私の亀裂は、クエリを検出し、入力に特殊文字を挿入するカスタム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

+0

ありがとう、私は自分のRESTクエリを変更することを避けようとしていましたが、私はそのアプローチに着手したと思います。このように動作する必要があるすべてのListオブジェクトにfilter = {defaultToContains = true}の小道具を追加して、少なくとも私の現在の基本動作を維持できるようにします。 皆さんありがとうございます! –

関連する問題