ReactJS - Redux Form - 如何根据无线电场元素有条件地显示/隐藏元素？

Question

我对Redux比较陌生,而且我的表单有一些无线电输入"是"或"否".基本上,我想有条件地显示另一个包含另一个redux表单字段的元素,基于该无线电输入选择.有没有直接做到这一点？

我试图检查formProps.site_visit值,但是我得到一个关于它未定义的错误.为了记录,为了简洁起见,我大大减少了这个组件中的代码量.

export class RequestForm extends React.Component {

submit(formProps) {

   const request = {
      square_footage: formProps.get('square_footage'),
      site_visit: formProps.get('site_visit'),
   };

   this.props.dispatch(createRequest(request));
}

// Redux Form Props.
    const { handleSubmit, pristine, reset, submitting } = this.props
    return (
      <form className="page-form__wrapper">
        <div className="page-form__block">
          <div className="page-form__block">
            <p> Is a site visit required to complete this request? </p>
            <Field name="site_visit"
              component={RadioButtonGroup}
            >
              <RadioButton value="true" label="Yes" />
              <RadioButton value="false" label="No" />
            </Field>
          </div>
          {this.formProps.site_visit === true &&
            <div className="page-form__block">
              <p> Estimate the total area of work in square feet </p>
              <Field name="square_footage" component={TextField} hintText="Square Feet" />
            </div>
          }
       </div>
     </form>
   );
}

提前致谢!

Answer 1

你需要使用一个 formValueSelector

const selector = formValueSelector('formName');

function mapStateToProps(state, props) {
    const isChecked = selector(state, 'checkboxField');
    return { isChecked };
}

connect 运用 mapStateToProps

render方法看起来像这样.

render() {
    return (
        { this.props.isChecked && (
            <div>
                this only shows up if the checkboxField Field is checked
            </div>
        ) }
    );
}

编辑:

看起来你正在使用reselect- 我从未使用过createStructuredSelector,我不是100%理解文档,但可能的解决方案可能是:

const mMapStateToProps = createStructuredSelector({
    request: selectRequestForm(), 
    user: selectUser()
});

const mapStateToProps = (state, props) => {
    return {
        isChecked: selector(state, 'checkboxField'),
        ... mMapStateToProps(state, props) // not sure if createStructuredSelector accepts a props param
    }
};

那将构成两者.我想你也可以使用createSelector与mMapStateToProps和mapStateToProps我最初发布...