использование React Autosuggest с Formik - PullRequest
Новая
       6

использование React Autosuggest с Formik

0 голосов
/ 19 февраля 2020

Кто-нибудь имел пример / учебное пособие для реализации response-autosuggest in Formik ? У меня проблема с передачей inputProps компоненту AutoSuggest. Ниже приведен мой пример кода. TIA. 

const locationSuggestion = [
  {
    locationName: 'Gambir, Jakarta Pusat, DKI Jakarta',
    districtCode: '31.71.01',
    postCode: [11220, 11221, 11222] 
  },
  {
    locationName: 'Koja, Jakarta Utara, DKI Jakarta',
    districtCode: '31.72.03',
    postCode: [11220, 11221, 11222] 
  },
  {
    locationName: 'Tambora, Jakarta Barat, DKI Jakarta',
    districtCode: '31.73.04',
    postCode: [11220, 11221, 11222] 
  },
  {
    locationName: 'Palmerah, Jakarta Barat, DKI Jakarta',
    districtCode: '31.73.07',
    postCode: [11220, 11221, 11222] 
  },
  {
    locationName: 'Tebet, Jakarta Selatan, DKI Jakarta',
    districtCode: '31.74.01',
    postCode: [11220, 11221, 11222] 
  },
  {
    locationName: 'Matraman, Jakarta Timur, DKI Jakarta',
    districtCode: '31.75.01',
    postCode: [11220, 11221, 11222] 
  },
];

function escapeRegexCharacters(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function getSuggestions(value) {
  const escapedValue = escapeRegexCharacters(value.trim());

  if (escapedValue === '') {
    return [];
  }
  const regex = new RegExp('^' + escapedValue, 'i');
  return locationSuggestion.filter(loc => regex.test(loc.locationName));
}

function getSuggestionValue(suggestion) {
  return suggestion.locationName;
}

function renderSuggestion(suggestion) {
  return (
    <span>{suggestion.locationName}</span>
  );
}

class SCO extends Component {

onSuggestionsFetchRequested = ({ value }) => {
    console.log("test : ", value);
    this.setState({
      suggestions: getSuggestions(value)
    });
  };

  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: []
    });
  };

render() {
return (
<Formik
  initialValues={this.state}
  enableReinitialize
  validationSchema={SocioSchema}
  onSubmit={values => {

  }}
>
  {
  props => (
    <Form onSubmit={props.handleSubmit}>
      <CardHeader>

      </CardHeader>
      <CardBody>
    <Row>
      <Col xs="12" sm="8">

        <FormGroup row>
          <Label
        htmlFor="receiverCity"
        className="col-md-3 col-form-label-sm text-right"
          >
        Kecamatan / Kota
          </Label>
          <Col xs="12" md="7"> 
        <Autosuggest 
          suggestions={this.state.suggestions}
          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
          getSuggestionValue={getSuggestionValue}
          renderSuggestion={renderSuggestion}
          inputProps={props.values.inputProps} />
        <FormFeedback className="help-block">
          {props.errors.receiverCity}
        </FormFeedback>
          </Col>
        </FormGroup>
      </Col>
    </Row>
      </CardBody>
      <CardFooter>
    <Button
      size="sm"
      type="reset"
      className="btn-tumblr btn-brand mr-2"
      onClick={this.handleReset}
    >
      <i className="fa fa-dot-circle-o"></i>
      <span>Reset</span>
    </Button>
    <Button
      type="submit"
      size="sm"
      className="btn-submit btn-brand mr-2"
      // disabled={props.isSubmitting}
    >
      <i className="fa fa-paper-plane"></i>
      <span>Pesen</span>
    </Button>
      </CardFooter>
    </Form>
  )}
</Formik>
)
}
}

1 Ответ

0 голосов
/ 19 февраля 2020

inputProps имеет некоторые подробности, подобные этой, и это необходимо, поэтому вам нужно передать это значение 

const inputProps = {
  value,          
  onChange,       
  onBlur,         
  type: 'search',
  placeholder: 'Enter city or postcode'
};

, поэтому вы можете просто добавить эту информацию в inputProps

...