Javascript 使用React Autosuggest与Formik

是否有人提供了在中实现的示例/教程？ 我在将

inputProps

传递到AutoSuggest组件时遇到了问题。下面是我的示例代码。蒂亚

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>
)
}
}

const locationSuggestion=[
{
地点名称：'Gambir，Jakarta Pusat，DKI Jakarta'，
地区代码：“31.71.01”，
邮政编码：[11220、11221、11222]
},
{
地点名称：“Koja，雅加达乌塔拉，DKI雅加达”，
地区代码：“31.72.03”，
邮政编码：[11220、11221、11222]
},
{
地点名称：'Tambora，Jakarta Barat，DKI Jakarta'，
地区代码：“31.73.04”，
邮政编码：[11220、11221、11222]
},
{
地点名称：'Palmerah，Jakarta Barat，DKI Jakarta'，
地区代码：“31.73.07”，
邮政编码：[11220、11221、11222]
},
{
地点名称：'Tebet，Jakarta Selatan，DKI Jakarta'，
地区代码：“31.74.01”，
邮政编码：[11220、11221、11222]
},
{
地点名称：'Matraman，雅加达帖木儿，DKI雅加达'，
地区代码：“31.75.01”，
邮政编码：[11220、11221、11222]
},
];
函数转义字符（str）{
返回str.replace（/[.*+？^${}（）\[\]\\]/g，\\$&'）；
}
函数getSuggestions（值）{
const escapedValue=escapeRegexCharacters（value.trim（））；
如果（转义值==''）{
返回[]；
}
const regex=new RegExp（'^'+escapedValue，'i'）；
返回locationSuggestion.filter（loc=>regex.test（loc.locationName））；
}
函数getSuggestionValue（建议）{
return suggestion.locationName；
}
功能渲染建议（建议）{
返回(
{suggestion.locationName}
);
}
类SCO扩展组件{
OnSuggestionFetchRequested=（{value}）=>{
日志（“测试：”，值）；
这是我的国家({
建议：getSuggestions（值）
});
};
OnSuggestionClearRequested=（）=>{
这是我的国家({
建议：[]
});
};
render（）{
返回(
{
}}
>
{
道具=>(
凯卡马坦/科塔
{props.errors.receiverCity}
重置
佩森
)}
)
}
}

inputProps

有一些类似的详细信息，这是必需的，因此您需要传递此值

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

---

那么，您是否可以将此详细信息添加到inputProps

您是否检查了如何传递inputProps的react autosuggest文档请参见此处详细信息传递到