将 React Autosuggest 与 Formik 一起使用答案

【问题标题】：using React Autosuggest with Formik将 React Autosuggest 与 Formik 一起使用
【发布时间】：2020-02-19 11:04:34
【问题描述】：

有人有在Formik 中实现react-autosuggest 的示例/教程吗？我在将 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>
)
}
}

【问题讨论】：

你检查过 react-autosuggest 文档，说明如何通过 inputPorps 看这里详细信息传递给inputPorops

标签： javascript reactjs babeljs formik

【解决方案1】：

您需要在 inputprops 中添加 id 和 name 属性。

  inputProps={{
    value: formik.values.receiverCity,
        onChange: formik.handleChange,
        id: "receiverCity",
        name:"receiverCity",
  }}

【讨论】：

【解决方案2】：

inputProps 有一些这样的细节，它是必需的，所以你需要传递这个值

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

所以你能把这个细节添加到 inputProps 中

【讨论】：