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

//Insert new record to DB
function InsertJersey(JerseyObject $jersey){

    //Open connection to db
    require 'Credentials.php';
    mysql_connect($host, $user, $passwd) or die(mysql_error());
    mysql_select_db($database);

     $query = sprintf("INSERT INTO 'jerseys'('condition', 'design', 'price', 'team', 'players', 'image', 'details') 
            VALUES('%s','%s','%s','%s','%s','%s','%s')",
            mysql_real_escape_string($jersey->condition),
            mysql_real_escape_string($jersey->design),
            mysql_real_escape_string($jersey->price),
            mysql_real_escape_string($jersey->team),
            mysql_real_escape_string($jersey->players),
            mysql_real_escape_string('Images/Jersey/' . $jersey->image),
            mysql_real_escape_string($jersey->details));

     //Execute query and close connection
     mysql_query($query) or die(mysql_error());
     mysql_close();

}

const selector = formValueSelector('formName'); function mapStateToProps(state, props) { const isChecked = selector(state, 'checkboxField'); return { isChecked }; }使用connect

渲染方法将如下所示。

mapStateToProps

编辑：

看起来你正在使用render() { return ( { this.props.isChecked && ( <div> this only shows up if the checkboxField Field is checked </div> ) } ); } - 我从未使用过reselect而且我没有100％理解文档，但可能的解决方案可能是：

createStructuredSelector

这将构成两者。我想你也可以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 ...

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

1 个答案: