ReactJS：ページにスピナー/プログレスバーを追加する

Question

ページにスピナー/プログレスバーを追加することはできません。 多くの異なるライブラリを試しましたが、成功することはありません。

は、私はそれが
// SHOWのSPINNER に表示し、怒鳴るコード

感謝任意の助けに
//非表示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

はもっとここにhttps://github.com/KyleAMathews/react-spinkit

参照

使用

import Spinner from 'react-spinkit'; 

<Spinner spinnerName='double-bounce' /> 

をインストールします。 0