ReactJS-Redux表单-如何基于无线电场元素有条件地显示/隐藏元素？

我对Redux比较陌生，我有一个表单，有一些无线电输入“是”或“否”。基本上，我想有条件地显示另一个元素，它包含另一个redux表单字段，基于该无线电输入选择。这样做有直截了当的方法吗

我正试图检查

formProps.site\u 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>
   );
}

导出类RequestForm扩展React.Component{
提交（formProps）{
常量请求={
平方英尺：formProps.get（“平方英尺”），
站点访问：formProps.get（“站点访问”），
};
this.props.dispatch（createRequest（request））；
}
//重复使用表单道具。
const{handleSubmit，pristine，reset，submiting}=this.props
返回(
完成此请求是否需要现场访问

{this.formProps.site_visit===true&&
以平方英尺为单位估算总工作面积

}
);
}

提前谢谢

您需要使用

使用
MapStateTrops连接

渲染方法如下所示

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

那将构成两个。我想你也可以使用
createSelector
和
mMapStateToProps
以及我最初发布的
mapstatetops
查看是的。这几乎就是示例中演示的用例。Hm。我的mapStateToProps（）看起来像：const mapStateToProps=createStructuredSelector（{request:selectRequestForm（），user:selectUser（），}）；因此，我不确定如何将这个示例改进为那个示例。我继承了这个项目，并没有完全掌握所有这些connect和stateToProps以及所有这些东西yet@StevieStar现在试试这是一个狗屎负载的工作，以获得一个表单值的形式，你正在使用。
render() {
    return (
        { this.props.isChecked && (
            <div>
                this only shows up if the checkboxField Field is checked
            </div>
        ) }
    );
}

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
    }
};