reactjs - react 还原: avoid onClick if loading

Question

我有一个带有按钮的模态组件，可以使用 axios 进行异步调用。

我需要在调用时删除 onClick 操作以避免不必要的点击。

像这样但更优雅:

const Modal = ( props ) => {  
  const modal = props.modal
  if (!modal.loading) {
    return (
        <div>
          <button onClick={() => props.updateModal(123)}>123</button>        
        </div>
    );
  }
  else {
    return (
        <div>
          <button>123</button>        
        </div>
    );    
  }
}

const mapStateToProps = state => {
  return {
    modal: state.modal,
  }
}

const mapDispatchToProps = dispatch => {
  return {    
    updateModal(number){      
      dispatch(loadingModal(true));      

      // async call
      return axios.post(
          // async call data
        )
        .then((response) => {
          dispatch(loadingModal(false));          
          dispatch(updateModal(number))
        })
        .catch((error) => {
            console.log("Error");
        }
      )
    }
  };
}

Answer 1

您可以有条件地采取类似的操作，而不是有条件地渲染带有或不带有 onClick 的按钮

const Modal = ( props ) => {  
  const modal = props.modal
  const handleClick = (val) => {
       if(!modal.loading) {
          props.updateModal(val)
       }
   }
    return (
        <div>
          <button onClick={() => handleClick(123)}>123</button>        
        </div>
    );
}