简体   繁体   English

如何以react-tippy将HTML props中的组件连接到redux形式

[英]How to connect component in html props in react-tippy to redux form

I have got a problem with react-tippy component. 我对react-tippy组件有问题。 I would like to pass in html props react component with redux form, but I receive an error like this: 我想以redux形式传递html props react组件,但收到如下错误:

Uncaught Error: Could not find "store" in either the context or props of "Connect(Form(AssignDriverForm))". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Form(AssignDriverForm))".

Here is code of react tippy component: 这是react tippy组件的代码:

class AssignDriverToolTip extends Component {
    state = { open: false }
    setIsOpen = () => this.setState({ open: true });
    setIsClose = () => this.setState({ open: false });

    render() {
        return (
            <CustomTooltip
                theme="light"
                open={this.state.open}
                arrow={false}
                html={(
                    <AssignDriverForm/>
                )}
                position='right'
                trigger="click" >
                <CustomButton infoSmallWithIcon onClickHandler={() => this.setIsOpen()}>
                    <SVGComponent icon="pen" color="white" width="12px" height="12px" />
                    {strings.assignDriver}
                </CustomButton>
            </CustomTooltip>
        )
    }
}
export default AssignDriverToolTip;

And also here is an AssignDriverForm component: 这也是一个AssignDriverForm组件:

class AssignDriverForm extends Component {
    handleSubmit = (data) => {
        console.log(data);
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <Field
                    name="message"
                    type="textarea"
                    autoComplete="off"
                    component="textarea" />
            </form>
        )
    }
}

AssignDriverForm = reduxForm({
    form: 'assignDriver'
})(AssignDriverForm)

export default AssignDriverForm;

When I change it to component without redux-form everything works fine. 当我将其更改为没有redux-form的组件时,一切正常。 But I really dont know how to fix it. 但是我真的不知道如何解决它。 Could you help me ? 你可以帮帮我吗 ?

As the error message says: find the root component where you create your store. 如错误消息所述:在创建商店的地方找到根组件。 (Something like this in index.jx) (在index.jx中类似这样)

const store = createStore(reducer)

Then make sure you wrap your component in the <Provider> wrapper. 然后确保将组件包装在<Provider>包装器中。

// render app
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
)

Redux form uses a normal Redux store, so somewhere you need to add that reducer to your main reducer. Redux表单使用普通的Redux存储,因此您需要在某个地方将该Reduce添加到您的主Reduce中。 You may have something like this: 您可能会遇到以下情况:

// combine reducers
const reducer = combineReducers({
  myReducer,
  ...
  form: formReducer // for redux-form
})

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM