在按钮单击上切换字段,并以redux形式选择表单值

时间:2019-04-15 18:33:59

标签: reactjs redux redux-form

我正在尝试使用Redux-Form中的选择表单值基于在FieldArray中单击按钮来显示/隐藏字段。

我已经使用checkbox和dropdown方法完成了此操作,但是我似乎无法使按钮类型正常工作。这是我的代码,包括我的连接功能。

 let OfferPosts = ({ offer_posts, index, fields, hasLastName, postMethod, has_revenue, linkout_has_revenue }) =>

 <div key={index} className="colorTest">
  <br/>

  <Row>
    <Col lg={2}>
    <br/>

      <Button color="danger"
      className="removeofferInputParent"
      type="button"
      title="Remove Parent Attribute"
      onClick={() => fields.remove(index)}><i className="fa fa-close"></i></Button>
    </Col>
    <Col lg={2}>
    <Field
      name={`${offer_posts}.post_type`}
      type="select"
      component={renderOfferPostAction}
      label="Action happens on:" />
    </Col>
    <Col lg={2}>
    <Label>Advertiser</Label>
    <Field type="select"
                    name={`${offer_posts}.advertiser_id`}
                    component={renderHandlerList}
                    label="Advertiser"
                    data={advertiserList}
                    textField="name"
                    valueField="id"
                    />
    </Col>
    </Row>

  OfferPosts = connect(
    (state, props) => ({

      has_revenue: !!selector(state, `${props.offer_posts}.has_revenue`),
      postMethod: selector(state, `${props.offer_posts}.post_method`),
      linkout_has_revenue: !!selector(state, `${props.offer_posts}.linkout_has_revenue`),


    })
  )(OfferPosts)

  const renderOfferPosts = ({ fields, meta: { touched, error } }) => (
    <div>
      <hr/>
      <Row>
        <Col lg={3}>
          <h4>Offer Posts</h4>
        </Col>
        <Col lg={9}>
      <Button color="success" className="float-right" onClick={() => fields.push({})}>Add Offer Post</Button>
        {touched && error && <span>{error}</span>}
        </Col>
        </Row>
        <br/>
      {fields.map((questionAnswers, index) =>
        <OfferPosts offer_posts={questionAnswers} fields={fields} index={index} key={index} />)}
        </div>
  )

我知道,当您使用复选框时,它将显示基于设置为true的复选框的字段。我正在寻找做同样的事情,只是用一个按钮而不是一个复选框。

谢谢!

0 个答案:

没有答案