Question

我没有把微调器/进度条添加到页面中。尝试了许多不同的图书馆，但没有成功。

我需要它在上面显示 // SHOW SPINNER 然后隐藏在 // HIDE SPINNER 在下面的代码中的行

任何帮助表示感谢。

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { deleteUser } from '../actions/Actions';
import { updateUser as APIUpdateUser, addUser as APIAddUser } from '../utils/APIUtils';

import language from '../language';
import scrollToElement from 'scroll-to-element';
import CarsSelect from './CarsSelect';
var _ = require('lodash');

function mapStateToProps(state) {
  return {

  };
}

class UserTableRow extends Component {

  static propTypes = {
    data: PropTypes.object.isRequired,
    number: PropTypes.number.isRequired,
  }

  static contextTypes = {
    store: React.PropTypes.object
  }

  constructor(props) {
      console.log("Progress");
    super(props);
    this.state = {
      edit: false,
      data: props.data
    };
    this._handleChange = this._handleChange.bind(this);
    this._handleCarChange = this._handleCarChange.bind(this);
    this._startEdit = this._startEdit.bind(this);
    this._cancelEdit = this._cancelEdit.bind(this);
    this._handleSave = this._handleSave.bind(this);
    this._handleShow = this._handleShow.bind(this);
  }

  componentDidMount() {
    const {data} = this.props;
    if (typeof data.new !== 'undefined' && data.new === true) {
      this.setState({
        edit: true
      });

      scrollToElement(this.refs.row, {
        offset: 0,
        ease: 'out-bounce',
        duration: 1000
      });
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      data: nextProps.data,
    });
  }

  render() {
    const {number} = this.props;
    const {data} = this.state;
    const lang = language[language.default];

    var showClass = 'more';
    var rowHidden = 'hidden';
    if (this.state.more === true) {
      showClass = 'less';
      rowHidden = 'visible';
    }

    var editClass = '';
    if (this.state.edit === true) {
      editClass = 'table__row--edit';
    }

    return (
    <div>
      <div ref='row' className={'table__row table__row--outer ' + editClass}>
        <div className='table__elements-wrapper'>
          <div className='table__element'>{number}</div>
          <div className='table__element'>
            <span className='table__editable-data'>{data.email}</span>
            <input onChange={this._handleChange.bind(this, 'email')} className='table__editable-hidden' ref='email' name='email' type='email' value={data.email} />
          </div>
          <div className='table__element'>
            <span className='table__editable-data'>{data.firstName}</span>
            <input onChange={this._handleChange.bind(this, 'firstName')} className='table__editable-hidden' ref='firstName' name='firstName' type='text' value={data.firstName} />
          </div>
          <div className='table__element'>
            <span className='table__editable-data'>{data.lastName}</span>
            <input onChange={this._handleChange.bind(this, 'lastName')} className='table__editable-hidden' ref='lastName' name='lastName' type='text' value={data.lastName} />
          </div>
          <div className='table__element'>
            <span className='table__editable-data'>{data.phone}</span>
            <input onChange={this._handleChange.bind(this, 'phone')} className='table__editable-hidden' ref='phone' name='phone' type='text' value={data.phone} />
          </div>
          <div className='table__element'>
            <span className='table__editable-data'>{lang.userArr[data.type]}</span>
            <select onChange={this._handleChange.bind(this, 'type')} className='table__editable-hidden' ref='type' name='type' type='text' value={data.type}>
              <option value='0'>{lang.userArr[0]}</option>
              <option value='1'>{lang.userArr[1]}</option>
              <option value='2'>{lang.userArr[2]}</option>
            </select>
          </div>
          <div className='table__element'>
            <input className='table__editable-hidden' ref='password' name='password' type='password' />
          </div>
          <div className='table__element table__element--avatar'>
            <img lightbox='lightbox' className='table__editable-data' src={data.image} alt=''/>
            <input className='table__editable-hidden' type='file' ref='image' name='image' />
          </div>
          <div className='table__element'>
          {(() => {
            if (data.superAdmin !== true) {
              return <div className='table__buttons'>
                        <div onClick={this._startEdit} className='table__button table__button--edit'></div>
                        <div onClick={this._cancelEdit} className='table__button table__button--cancel '></div>
                        <div onClick={this._handleSave} className='table__button table__button--ok'></div>
                      </div>;
            } else {
              return false;
            }
          })()}
          </div>
          <div className='table__element'><div onClick={this._handleShow} className={'table__show table__show--' + showClass}></div></div>
        </div>
        <div ref='hiddenRow' className={'table__row table__row--inner table__row--' + rowHidden}></div>
      </div>
    </div>
    );
  }

  _handleShow() {
    var more = this.state.more;
    if (!more) {
      ReactDOM.render(<CarsSelect handleCarChange={this._handleCarChange} user={this.state.data} />, this.refs.hiddenRow);
    } else {
      ReactDOM.unmountComponentAtNode(this.refs.hiddenRow);
    }

    this.setState({
      more: !more
    });
  }

  _handleCarChange(e) {
    var {data} = this.state;
    var values = [];
    var userValues = [];
    _.each(e, function(item) {
      values.push({nameplate: item.label, _id: item.value});
      userValues.push(item.value);
    });
    data.cars = values;
    this.setState({
      data: data
    });
    var user = {};

    user._id = data._id;
    user.cars = userValues;
    APIUpdateUser(user);
  }

  _handleChange(type, event) {
    var data = this.state.data;
    data[type] = event.target.value;

    this.setState({
      data: data
    });
  }

  _startEdit() {
    this.setState({
      edit: true
    });
  }

  _cancelEdit() {
    const {data} = this.props;
    if (data.new === true) {
      this.context.store.dispatch(deleteUser(data));
    }
    this.setState({
      edit: false
    });
  }

  _handleSave() {
    //SHOW SPINNER

    const {data} = this.props;
    var user = {};

    user._id = data._id;
    user.email = this.refs.email.value;
    user.firstName = this.refs.firstName.value;
    user.lastName = this.refs.lastName.value;
    user.phone = this.refs.phone.value;
    user.type = this.refs.type.value;
    if (this.refs.password.value) {
      user.password = this.refs.password.value;
    }

    if (this.refs.image.files[0]) {
      var reader = new window.FileReader();
      reader.readAsDataURL(this.refs.image.files[0]);
      reader.onloadend = function() {
        user.image = reader.result;
        console.log(user.image);
        if (data.new === true) {
          this.context.store.dispatch(deleteUser(data));
          APIAddUser(user);
        } else {
          APIUpdateUser(user);
        }
      };
    } else {
      if (data.new === true) {
        this.context.store.dispatch(deleteUser(data));
        APIAddUser(user);
      } else {
        APIUpdateUser(user);
      }
    }

    this.setState({
      edit: false
    });

      //HIDE SPINNER
  }
}

var getOptions = function(input, callback) {
  setTimeout(function() {
    callback(null, {
      options: [
          {value: 'one', label: 'One'},
          {value: 'two', label: 'Two'}
      ],
      // CAREFUL! Only set this to true when there are no more options,
      // or more specific queries will not be sent to the server.
      complete: true
    });
  }, 500);
};

export default connect(mapStateToProps)(UserTableRow);

Answer 1

安装

$ npm install react-spinkit --save

用法

import Spinner from 'react-spinkit';

<Spinner spinnerName='double-bounce' />

点击此处https://github.com/KyleAMathews/react-spinkit

ReactJS：向页面添加微调器/进度条

1 个答案: