反应检查属性是否存在并且为假

时间:2019-03-13 15:13:29

标签: reactjs boolean

我有一些表单输入,我希望能够设置一些必填项和一些可选项。我想使用required属性,以便HTML在语义上是正确的:

<input onBlur={this.handleBlur} name="first_field" />
<input onBlur={this.handleBlur} name="first_field" required={false} />
<input onBlur={this.handleBlur} name="first_field" />

我希望添加required={false},因此我不必在每个字段中添加必需的道具。但是,进行检查变得有些奇怪:

handleBlur = (e) => {
  if (e.target.value === '') {
    // show an error if field empty and required
    // NOT explicitly set to false
    if (!this.props.required) {
      setError('This field is required') 
    }
  }
}

我无法做if (!this.props.required),因为如果未声明该属性,那将是正确的。

有比双倍检查更简单的方法吗?

更新:我匆忙假定这是一个代码问题,但是在下面的注释中进行了一些讨论之后,我现在认为这是一个语义问题,涉及应如何使用HTML的“ required”属性,或者如何使用用React来解决这个问题。我选择不删除该问题,因为将来对其他人来说可能会有一些价值。

3 个答案:

答案 0 :(得分:3)

听起来您正在尝试更改required的语义。如果该属性不存在,则应默认为false。显式设置required={false}很好。但是,在没有required的情况下更改含义对我来说似乎是个坏习惯。

相反,您可以编写自己的组件。例如,您可以将其命名为OptionalInput。给它一个名为optional的道具,然后使用一个类似以下内容的render()函数:

render() {
    return <input name={this.props.name}
                  id={this.props.id}
                  ...
                  required={!this.props.optional}/>
}

您还需要为要支持的所有input属性添加道具。

答案 1 :(得分:3)

您可以使用defaultProps对其进行简化:

defaultProps: {
   required: true
}

如果未定义属性,则将使用true

但是,最好将条件取反并将其命名为optional,然后您可以简单地将其用作:

 <input name="first_field" optional />

答案 2 :(得分:0)

最简单的方法是强制布尔转换。诸如undefined,null,0或false之类的任何falsey值都将导致false,其他任何值都将被视为true。在这种情况下,由于required直到被指定为prop时才存在,因此在分配其值之前将返回false。您可以在浏览器的终端上尝试以下操作;

const data = {};
console.log('no required has been defined, ', !!data.required);
data.required = false;
console.log('required has been set to false, ', !!data.required);
data.required = true;
console.log('required should be true now, ', !!data.required);
delete data.required;
console.log('back to not defined, ' !!data.required);

希望有帮助!