Question

我正在使用反应，我有这样的状态

this.state = {
  form: {
    name: {required: true, filled: false, value: ''},
    age: {required: true, filled: false, value: ''},
    dob: {required: false, filled: false, value: ''}
  }
}

我想检查每个表单字段是否已填写，我试过这个

const formValid = Object.keys(this.state.form).filter(o=>{
  return o.required
}).every(o=> {
  return o.filled!==null && o.filled!==''
})

我知道这是错误的，因为Object.keys只是返回键，我希望状态是数组它会让我的生活更轻松，但是如果我不想改变状态的结构怎么办？我该怎么做？

Answer 1

您可以映射对象键。

const formValid = Object.keys(this.state.form)
    // map the keys to their values.
    .map(key => this.state.form[key])
    .filter(o => o.required)
    ...

编辑：但如果你想要的只是值，那么另一个答案就更好了。

Answer 2

请改用Object.values(this.state.form)。这将返回值的数组而不是键。

Answer 3

我会将Array#every与Object.keys

一起使用

使用Object.keys，您可以通过引用它所属的对象来获取值，例如。 this.state.form[key]

const formValid = 
  Object.keys(this.state.form)
    .every(key => (
      this.state.form[key].required && 
      this.state.form[key].filled !== null && 
      this.state.form[key].filled !== ''
    ))

如果您需要引用失败，我会将every更改为filter

使用每个es6对象来检查每个属性是否有条件

3 个答案: