Question

每当我的object属性之一设置为true时，我都希望禁用组件中的按钮。

<form action="Registrazione" method="post" name="registrazione" id="form">
<div class="signlog">
<h1>Registrazione</h1>
<p>Compila il form per creare un account.</p>   
<label for="username"><b>Username</b></label>
<input type="text" name="username" onchange="controlloUsername()" id="uno"></div></form>

这是我的验证对象

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

请注意，禁用我的交易只需要1 true，这可能吗？我尝试“减少”，但没有成功。我试图复制他们在这里所做的事情

find sum of Boolean values JavaScript object array

Answer 1

您可以使用Object.values()来减小值，并且，您还需要使用or或（||）来减小值，以便仅在所有值均为false时才为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);

Answer 2

您在这里有一个对象，因此直接使用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>

根据对象属性禁用按钮

2 个答案: