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属性中有一个错误。根据文档：

要记住的重要一件事是，没有单一的价值   为一个 ;而是有两种类型的值（即   等价，更多时候不是）

modelValue-处于商店状态的模型的确切值   viewValue-组件状态下模型的显示值   例如，如果文本控件具有updateOn =“ blur”，则其viewValue将   代表输入中要键入的内容，而modelValue   输入模糊后，它将代表持久值。

因此，您将需要将viewValue映射到自定义   控件的值（如果您希望从外部更新值）

这是将react-autocomplete与react-redux-form一起使用的工作示例：

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元素

1 个答案: