禁用基于对象属性的按钮

Question

我想在我的一个object属性设置为true时禁用我的组件中的按钮。

      className="button save"
      disabled={this.props.validationObject.reduce(
        (sum, next) => sum && next,
        true
      )}
    >

这是我的验证对象

validationObject: {
    Title: true,
    IBCSegmentId: true,
    CountryId: true,
    localCOMPageTitle: true
  }

请注意，对于我的残疾人来说，只有1个为真，这是可能的吗？我试过“减少”，但它没有奏效。我试图复制他们在这里所做的事情

find sum of Boolean values JavaScript object array

Answer 1

你有一个对象，所以直接使用reduce或任何其他数组方法在你的情况下不起作用。您可以使用Object.keys和some来获得所需的结果。

const obj = {
    Title: false,
    IBCSegmentId: true,
    CountryId: false,
    localCOMPageTitle: false,
};

const isTrue = Object.keys( obj ).some( el => obj[el] );

console.log( isTrue );

const obj = {
  Title: false,
  IBCSegmentId: true,
  CountryId: false,
  localCOMPageTitle: false
};

class App extends React.Component {
  render() {
    const isTrue = Object.keys(obj).some(el => obj[el]);
    return (
      <button disabled={isTrue}>Foo</button>
      );
  }
}

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

<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 2

您可以使用Object.values()来减少值，并且还需要使用或（||）操作进行缩减，以便只有在所有这些操作都为假时才会为false。

var validationObject = {
    Title: false,
    IBCSegmentId: false,
    CountryId: false,
    localCOMPageTitle: false
  };

var shouldDisable = Object.values(validationObject).reduce(
       (sum, next) =>sum || next
      );
   
console.log(shouldDisable);


validationObject = {
    Title: true,
    IBCSegmentId: false,
    CountryId: false,
    localCOMPageTitle: false
  };

shouldDisable = Object.values(validationObject).reduce(
       (sum, next) =>sum || next
      );
console.log(shouldDisable);