admin on rest : 입력을 필터 입력으로 변경합니다.

Question

며칠 동안 저의 관리자와 함께 나머지 작업을 수행하면서 문제가 발생했습니다. 필터 입력이 "같음"보다 "포함"과 같이 동작하도록 요청했습니다

내 API는 GET에서 입력과 함께 % 문자를 전달하여 이와 같은 조회를 지원합니다 (예 :/app ? foo = % 25bar % 25는 foo가 % bar %와 같은 앱을 반환합니다.

이상적인 세계에서 필자는 필터의 TextInput 필드에 % s를 제공하도록 사용자에게 알릴 수 있었지만 위대한 항목은 특수 문자 삽입에 문제가있다.

내 질문에, 내 개체의 개체에 입력되는 입력 주변에 와일드 카드 문자를 래핑하기 위해 무언가를 주입 할 수 있습니까?

TextInput을 다시 구현하고 OnChange, render 등에서 input.value를 업데이트하려고했지만 restClient가 여전히 사전 변경된 입력 값을 사용하고 있습니다.

Heres는 사용자 정의

Answer 1

당신이 필요로하는 쿼리를 감지하고 입력에 특수 문자를 주입 사용자 정의 REST 클라이언트입니다 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);

에서 내 균열.

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