【发布时间】：2017-04-28 01:54:12
【问题描述】：
我正在尝试在 redux 表单中显示加载指示器，我希望加载指示器放置在卡片内容中（Bulma CSS 框架）。由于渲染函数中的条件检查逻辑，下面的代码是有效的。当ticket 是null 时，我马上返回<div>Loading</div>。但是当我删除该条件时，它能够显示加载指示器，但表单无法显示初始值，尽管它包含 redux-form 道具中的初始值。以前有没有人遇到过这样的情况以及如何正确解决这个问题？
import React, { Component } from 'react';
import TicketForm from '../TicketForm/TicketForm';
import CustomerForm from '../CustomerForm/CustomerForm';
class TicketPanel extends Component {
componentWillMount() {
this.props.fetchTicket(this.props.ticketId);
}
render() {
const {ticket, loading, error} = this.props.activeTicket;
const isComponentLoading = loading || ticket === null;
const initialValuesForTicket = isComponentLoading ? {} : ticket.original_ticket_payload;
const initialValuesForCustomer = isComponentLoading ? {} : ticket.contact;
if (error) {
return <div>Error</div>
} else if (ticket === null) {
return <div>Loading</div>
}
return (
<div className="ticket-panel">
<TicketForm
loading={isComponentLoading}
initialValues={initialValuesForTicket} />
</div>
)
}
}
export default TicketPanel;以下是由呈现表单的逻辑组成的组件代码。它将显示表单组件或加载组件取决于从父级传递的loading props 值。
import React, { Component } from 'react';
import CSSModules from 'react-css-modules';
import {Field, reduxForm} from 'redux-form';
import {ID_TYPE_COLLECTION} from 'utilities/constant';
import styles from './TicketForm.scss';
class TicketForm extends Component {
renderIdTypes () {
return ID_TYPE_COLLECTION.map(idType => {
return <option key={idType.value} value={idType.value}>{idType.title}</option>;
});
}
render() {
const {handleSubmit, loading} = this.props;
const loadingComponentClass = loading ? "card-content" : "is-hidden";
const formComponentClass = loading ? "is-hidden" : "card-content";
return (
<div className="card">
<header className="card-header">
<p className="card-header-title">
Ticket
</p>
</header>
<form onSubmit={handleSubmit}>
<div className={loadingComponentClass}>
<div className="content">
<div className="is-component-loading"></div>
</div>
</div>
<div className={formComponentClass}>
<div className="content">
<div className="field is-horizontal">
<div className="field-label">
<label className="label">
Name
</label>
</div>
<div className="field-body">
<div className="field">
<div className="control">
<Field className="input" name="name" component="input" type="text" placeholder="Name" />
</div>
</div>
</div>
</div>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">
ID Type
</label>
</div>
<div className="field-body">
<div className="field">
<div className="control">
<div className="select is-fullwidth">
<Field className="input" name="owner_id_type" component="select">
{this.renderIdTypes()}
</Field>
</div>
</div>
</div>
</div>
</div>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">
NRIC
</label>
</div>
<div className="field-body">
<div className="field">
<div className="control">
<Field className="input" name="nric" component="input" type="text" placeholder="NRIC" />
</div>
</div>
</div>
</div>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">
Car Plate
</label>
</div>
<div className="field-body">
<div className="field">
<div className="control">
<Field className="input" name="car_plate" component="input" type="text" placeholder="Car Plate" />
</div>
</div>
</div>
</div>
<div className="field is-horizontal">
<div className="field-label">
<label className="label">
Mileage
</label>
</div>
<div className="field-body">
<div className="field">
<div className="control">
<Field className="input" name="mileage" component="input" type="text" placeholder="Mileage" />
</div>
</div>
</div>
</div>
</div>
</div>
<footer className="card-footer">
<a className="card-footer-item">Reset</a>
<a className="card-footer-item">Save</a>
</footer>
</form>
</div>
);
}
}
TicketForm = reduxForm({
form: 'TicketForm' // a unique identifier for this form
})(TicketForm)
export default CSSModules(TicketForm, styles)【问题讨论】：
标签： reactjs redux-form