reactjs - 根据 http 请求在按钮元素上 react 加载动画

Question

我希望我的按钮在单击时添加加载动画类，并在请求完成后删除该类。我正在使用 bulma css，它有用于加载动画的“正在加载”类。

我已经用这段代码实现了我想要的，但我不确定这是否是这样做的“ react 方式”。这是我所做的:

class App extends React.Component {
  constructor () {
    super()
    this.state = {
      users: [],
      isLoading: false
    }
  }
  
  toggleLoading = () => {
    this.setState((prevState, props) => ({
      isLoading: !prevState.isLoading
    }))
  }
  
  getUsers = () => {
    this.toggleLoading()
    let url = 'https://jsonplaceholder.typicode.com/'
    fetch(url + 'users')
      .then((res) => res.json())
      .then((data) => {
        this.setState({ users: data })
        this.toggleLoading()
      })
  }

  render () {
    return (
      <div className='section'>
        <h1 className='title'>User List</h1>
        <Button className={ 'button is-primary' + (this.state.isLoading ? ' is-loading' : '') } action={ this.getUsers } title='Get Users' />
        <ul>
        {
          this.state.users.map((user) => <li className='subtitle'>{ user.name }</li>)
        }
        </ul>
      </div>
    )
  }
}

const Button = (props) => (
  <button 
    className={ props.className }
    onClick={ props.action }
    >
    { props.title }
  </button>
)

ReactDOM.render(<App/>, document.getElementById('root'))

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>

Answer 1

你做对了。如果你想改进它，你可以

1. 新建一个支持loading属性的Button组件
2. 使用classnames管理类名
3. 使用 react-refetch 处理 fetch 加载状态