Question

我遇到了以下问题：每次更新我的redux商店中的searchString时，我传递给Griddle的CustomFilterConnectedComponent都会失去焦点，我不明白为什么会这样。

这是我的代码基于documentation：

哑组件：

import { connect } from "react-redux";

const CustomFilterComponent = (props) => (
  <input
    value={props.searchString}
    onChange={(e) => { props.setSearchString(e.target.value); }}
  />
);

智能组件：

const CustomFilterConnectedComponent = connect(
  (state: TRootReducerState) => {
    return ({
      searchString: state.searchString,
    });
  },
  (dispatch: any) => ({
    setSearchString: (e) => dispatch(setSearchStringActionCreator(e))
  })
)(CustomFilterComponent);

用法：

class SomePage extends React.Component<Props, {}> {
  render() {
  return (
        <div>

          {/* keypress - everything is ok, value is updated & focus is not lost*/}              
          <CustomFilterConnectedComponent/> 

          <Griddle
            components={{
                /* keypress - value is updated, but focus lost */                  
                Filter: CustomFilterConnectedComponent 
            }}
            storeKey="griddleStore"
            data={this.props.requests as any}
          />
     </div>
     );
   }
}

以下是github上问题的link。

Answer 1

我已将您的repro变成了story而我没有看到您的焦点问题。

尽管如此，我最好的猜测是该问题与向props.requests提供SomePage的方式有关。

customFilterComponent中的Griddle v1.9输入框失去焦点

1 个答案: