【问题标题】:CustomizedComponent not connected with reduxCustomizedComponent 未与 redux 连接
【发布时间】:2018-10-24 07:48:18
【问题描述】:

我有 2 个自定义组件。 我把它们放在一个字段中,这样我就可以保存它们的价值。 CustomizedComponent2 与 redux 完美连接,我可以接受它的价值,但 CustomizedComponent1 没有。为什么?

    <div className="mainMenu">
     <form name="handleProductsForm">
              <label>Product</label>
              <Field
                component={CustomizedComponent1}
                name="products"
                items={[
                  { value: "bag", id: 1 },
                  { value: "purse", id: 2 }
                ]}
              />
              <Field component={CustomizedComponent2} name="category" type="text"/>
    </div>

    let ProductsPanel= reduxForm({
     form: "handleProductsForm",
     enableReinitialize: true
    })(ProductsPanelWrapped);

    const mapStateToProps = (state, ownProps) => {
     return {
      initialValues: {
      }
     };
    };

【问题讨论】:

  • 请给我看你的redux相关代码
  • @MuhammadShaheem 查看我的代码。
  • 你在 com1 中设置项目,但在 com2 中没有,为什么?您怎么知道 com2 已连接?
  • @MuhammadShaheem com1 用作您必须选择的下拉菜单。 Com2 用作文本字段,您必须插入 smt。然后还有一个按钮,它也通过 onSubmit() 方法与表单连接,并且应该提交来自 com1 和 com2 的值。
  • 所以你想在用户点击提交时将项目发送到 redux 商店?

标签: reactjs react-native redux react-redux redux-form


【解决方案1】:
import {connect} from 'react-redux';
import { yourActionName} from '../../actions/yourActionName';


onSubmit(){
  const {dispatch} = this.props
  dispatch(yourActionName(this.state.items))
} 

 // getting data from comp1 to Field

      <div className="mainMenu">
 <form name="handleProductsForm">
          <label>Product</label>
          <Field
            component={CustomizedComponent1}
            name="products"
           getItems={(items)=> this.myItems(items)}
          />
          <Field component={CustomizedComponent2} name="category" type="text"/>
</div>

 myItems(items){
  this.setState(items: items)
}


//component 1

 let {getItems} = this.props
//call this function when you selected all values 
getItems(this.state.items)

【讨论】:

  • com1 中的项目如何与状态相关联?
  • 你使用的是 React.Component 还是 PureComponent ?
  • React.Component
  • 您是否从其他组件获取项目到 Field 组件?
  • 有没有帮助?
猜你喜欢
  • 1970-01-01
  • 2019-07-13
  • 2017-06-27
  • 2020-06-19
  • 1970-01-01
  • 2017-06-23
  • 2018-06-13
  • 2017-12-17
  • 1970-01-01
相关资源
最近更新 更多