How to use ref while I am using a connect() in Redux with typescript?

Viewed 243

I have stuck on a problem sometimes.

class AddUser extends React.Component<ModalProps, ModalState> {
  state: ModalState = {
    isShow: false
  };

  showModal = () => {
    this.setState({ isShow: true });
  };

  searchUser = ( value : string) => {
    this.props.updateUser(value);
  }

  render() {
    return (
      <Modal
        title="Add User"
        visible={this.state.isShow}
        onCancel={() => this.setState({ isShow: false })}
        onOk={() => this.setState({ isShow: false })}
      >
        <Input.Search allowClear onSearch={value => this.searchUser(value)}/>
      </Modal>
    );
  }
}

const mapStateToProps = (state: IState) => ({
  user : state.user
})

export default connect(mapStateToProps, {addUserGroupByUsername, updateUser}, null, {forwardRef : true})(AddUser);

This is a class component connected to Redux store.

I want to get it in a father component:

private modalElement: React.RefObject<>;
  constructor (props: GroupProps) {
    super(props);
    this.modalElement = createRef();
}

But the type Adduser here becoming to value, not a type. How can I fix this?

The error here:

    Type 'RefObject<any>' is not assignable to type '<T>() => RefObject<T>'.
  Type 'RefObject<any>' provides no match for the signature '<T>(): RefObject<T>'.  TS2322

    58 |   constructor (props: GroupProps) {
    59 |     super(props);
  > 60 |     this.modalElement = React.createRef<AddUser>();
       |     ^
    61 |   }

I am not sure which type should I use here?

0 Answers
Related