Question

这是我当前为网络应用程序构建的Button组件的代码。

import React from 'react'
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  root: {
    fontFamily: 'Nunito, sans-serif',
    textTransform: 'none',
    padding: '0.5rem 1rem'
  },
})

export default ({
  variant,
  onClick,
  fullWidth,
  disabled,
  color,
  size,
  icon,
  disableElevation,
  children,
  ...otherProps
}) => {
  const classes = useStyles()

  return (
    <Button
      variant={variant}
      onClick={onClick}
      fullWidth={fullWidth}
      disabled={disabled}
      color={color}
      size={size}
      classes={classes}
      startIcon={icon}
      disableElevation
      {...otherProps}
    >
      {children}
    </Button>
  )
}

Button.propTypes = {
  variant: PropTypes.oneOf(["text", "outlined", "contained"]),
  onClick: PropTypes.func,
  fullWidth: PropTypes.bool,
  disabled: PropTypes.bool,
  color: PropTypes.oneOf(['primary', 'secondary']).isRequired,
  size: PropTypes.oneOf(["small", "medium", "large"]),
  startIcon: PropTypes.node,
  disableElevation: PropTypes.bool
};

Button.defaultProps = {
  variant: "contained",
  fullWidth: false,
  disabled: false,
  color: "primary",
  size: "medium",
  disableElevation: true
}

当我在应用程序中加载按钮组件时，在我调用按钮的所有位置上，按钮似乎都处于禁用状态，而唯一没有出现这种情况的方法是我明确添加{{1 }}上的每个按钮组件。知道为什么会这样吗？

Answer 1

例如，在纯HTML中，即使按钮的Disabled属性设置为“ false”，按钮也会被禁用

Failed to build iOS app
Error output from Xcode build:
↳
    ** BUILD FAILED **


Xcode's output:
↳
    /Users/fabionevez/Applications/flutter/.pub-cache/hosted/pub.dartlang.org/firebase_auth-0.11.1+12/ios/Classes/FirebaseAuthPlugin.m:356:62: warning: implicit conversion loses integer precision: 'long' to 'int' [-Wshorten-64-to-32]
      userData[@"lastSignInTimestamp"] = [NSNumber numberWithInt:lastSignInDate];
                                         ~                       ^~~~~~~~~~~~~~
    1 warning generated.
    /Users/fabionevez/Applications/flutter/.pub-cache/hosted/pub.dartlang.org/cloud_firestore-0.12.11/ios/Classes/CloudFirestorePlugin.m:764:16: warning: 'timestampsInSnapshotsEnabled' is deprecated [-Wdeprecated-declarations]
          settings.timestampsInSnapshotsEnabled = (bool)call.arguments[@"timestampsInSnapshotsEnabled"];
                   ^
    In file included from /Users/fabionevez/Applications/flutter/.pub-cache/hosted/pub.dartlang.org/cloud_firestore-0.12.11/ios/Classes/CloudFirestorePlugin.m:8:
    In file included from /Users/fabionevez/Desktop/app/loja_roupa/ios/Pods/Headers/Private/Firebase/Firebase.h:49:
    In file included from /Users/fabionevez/Desktop/app/loja_roupa/ios/Pods/Headers/Private/FirebaseFirestore/FirebaseFirestore.h:25:
    /Users/fabionevez/Desktop/app/loja_roupa/ios/Pods/Headers/Private/FirebaseFirestore/FIRFirestoreSettings.h:69:20: note: 'timestampsInSnapshotsEnabled' has been explicitly marked deprecated here
        __attribute__((deprecated));
                       ^
    1 warning generated.
    duplicate symbol '_GDTCCTNeedsNetworkConnectionInfo' in:
        /Users/fabionevez/Desktop/app/loja_roupa/build/ios/Debug-iphonesimulator/GoogleDataTransportCCTSupport/libGoogleDataTransportCCTSupport.a(GDTCOREvent+NetworkConnectionInfo 2.o)
    duplicate symbol '_OBJC_IVAR_$_FBLPromise._observers' in:
        /Users/fabionevez/Desktop/app/loja_roupa/build/ios/Debug-iphonesimulator/PromisesObjC/libPromisesObjC.a(FBLPromise 2.o)
        /Users/fabionevez/Desktop/app/loja_roupa/build/ios/Debug-iphonesimulator/PromisesObjC/libPromisesObjC.a(FBLPromise.o)
    duplicate symbol '_OBJC_IVAR_$_FBLPromise._error' in:
        /Users/fabionevez/Desktop/app/loja_roupa/build/ios/Debug-iphonesimulator/PromisesObjC/libPromisesObjC.a(FBLPromise 2.o)
        /Users/fabionevez/Desktop/app/loja_roupa/build/ios/Debug-iphonesimulator/FirebaseFirestore/libFirebaseFirestore.a(FIRTransaction.o)
    duplicate symbol '_OBJC_IVAR_$_FIRTransaction._firestore' in:
        /Users/fabionevez/Desktop/app/loja_roupa/build/ios/Debug-iphonesimulator/FirebaseFirestore/libFirebaseFirestore.a(FIRTransaction 2.o)
        /Users/fabionevez/Desktop/app/loja_roupa/build/ios/Debug-iphonesimulator/FirebaseFirestore/libFirebaseFirestore.a(FIRTransaction.o)
    duplicate symbol '_OBJC_IVAR_$_FIRWriteBatch._dataConverter' in:
        /Users/fabionevez/Desktop/app/loja_roupa/build/ios/Debug-iphonesimulator/FirebaseFirestore/libFirebaseFirestore.a(FIRWriteBatch 2.o)

    ld: 44 duplicate symbols for architecture x86_64
    clang: error: linker command failed with exit code 1 (use -v to see invocation)
    note: Using new build system
    note: Building targets in parallel
    note: Planning build
    note: Constructing build description

Could not build the application for the simulator.
Error launching application on iPhone 11 Pro Max.
´´´


  [1]: https://i.stack.imgur.com/Kx1dg.png

...将呈现一个禁用的按钮。有关禁用的属性的更多信息，请参见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Button。按钮元素上的“已禁用”是一个布尔属性，它的存在表示是true，并且不允许使用值：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#Boolean_Attributes。

在React / JSX中，您需要将Disabled属性设置为undefined，这样就不会渲染该属性。您可以在这里进行测试：

我不确定您是否遇到此问题，但这可能是一个很好的线索。

Answer 2

问题出在Button组件中Disabled属性的名称。说“ disabled = {disabled}”与“ disabled = {true} ”或只是 disabled ”相同。因此，您可以尝试将残疾人命名为其他名称。可以说

{{#each persons as | person |}}
  {{name}} lives in {{#with (lookup ../cities [resident-in])~}}
    {{name}} ({{country}})
  {{/with}}
{{/each}}

自定义按钮组件始终处于禁用状态

2 个答案: