Question

我有一些表单输入，我希望能够设置一些必填项和一些可选项。我想使用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来解决这个问题。我选择不删除该问题，因为将来对其他人来说可能会有一些价值。

Answer 1

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

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

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

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

Answer 2

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

defaultProps: {
   required: true
}

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

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

 <input name="first_field" optional />

Answer 3

最简单的方法是强制布尔转换。诸如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);

希望有帮助！

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

3 个答案: