无法在 react-redux-form 控件中包装 react-autocomplete 元素

Question

我试图用 React Redux Form 控件包装 react-autocomplete 的组件，但我遇到了问题。这是我拥有的：

const typeaheadComponent = (props: any) => (
  <Autocomplete
    getItemValue={(item: string) => item}
    items={this.getOptions()}
    renderInput={(props: any) => (
      <input type="text" {...props} />
    )}
    renderItem={(item: string, isHighlighted: boolean) => {
      <div key={uuid.v4()}>{item}</div>;
    }}
    value={value}
    onChange={this.onChange}
    onSelect={this.onSelect}
    inputProps={{
      onKeyUp: this.onKeyPress
    }}
  />
);

return (
  <Control.text
    component={typeaheadComponent}
    mapProps={{
      value: props => props.modelValue
    }}
    model={model}
    id={model}
    value={value}
    persist
  />
);

}

当我只渲染 <Autocomplete> 元素（不将其包装在 RRF 控件中）时，它可以正常运行。但是，当我使用上面的代码将其包装在 RRF 控件中，并专注于我的文本框并按下一个键时，RRF rrf/clearIntents 操作会触发，但没有别的。此外，请注意每次按下键盘后的输入模糊。

我已经查看了 RRF custom controls 文档，但我仍在努力理解我遗漏了什么。

Answer 1

您在 mapProps 属性中有一个错误。根据文档：

One important thing to keep in mind is that there is no single value for a ; rather, there are two types of values (that are equivalent, more often than not):

modelValue - the exact value of the model in the store's state viewValue - the displayed value of the model in the component's state For example, if a text control has updateOn="blur", its viewValue will represent what is being typed in the input, whereas the modelValue will represent the persisted value, once the input is blurred.

Because of this, you will want to map the viewValue to a custom control's value if you wish to externally update the value

这是使用 react-redux-form 的 react-autocomplete 的工作示例：

import React from 'react';
import { Control, Form, actions } from 'react-redux-form';
import Autocomplete from 'react-autocomplete';

class UserForm extends React.Component {

  render() {
    return (
      <Form model="user">
        <label htmlFor="user.firstName">First name:</label>
        <Control.custom
          component={Autocomplete}
          model="user.firstName"
          id="user.firstName"
          controlProps={{
            getItemValue: (item) => item.label,
            items: [
              { label: 'apple' },
              { label: 'banana' },
              { label: 'pear' }
            ],
            renderItem: (item, isHighlighted) =>
              <div style={{ background: isHighlighted ? 'lightgray' : 'white' }} 
                   key={item.label}>
                {item.label}
              </div>
          }}
          mapProps={props => ({
            value: props.viewValue,
            onSelect: value => props.onChange(value),
            onChange: props.onChange,
            inputProps: {
              onBlur: props.onBlur,
              onFocus: props.onFocus,
              onKeyPress: props.onKeyPress,
            }
          })} />

        <label htmlFor="user.lastName">Last name:</label>
        <Control.text model="user.lastName" id="user.lastName" />

        <button type="submit">
          Finish registration!
        </button>
      </Form>
    );
  }
}

export default UserForm;

工作演示是 here。

无法在 react-redux-form 控件中包装 react-autocomplete 元素

Cannot wrap react-autocomplete element in react-redux-form control

javascript

reactjs

autocomplete

react-redux-form