处理输入禁用的正确方法？反应JS答案

【问题标题】：Proper way to handle input disable? ReactJS处理输入禁用的正确方法？反应JS
【发布时间】：2018-12-17 06:03:47
【问题描述】：

我正在学习 React，想制作一个简单的表单：有两个按钮：

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input type="text" value={this.state.value} onChange={this.handleChange} />
      </label>
      <input type="submit" value="Submit" />
      <input type="reset" value="Reset" />
    </form>
  );
}

我想根据文本输入禁用这两个按钮：如果输入为空，则应禁用按钮。
最好的方法是什么？

1) 检查渲染时的文本值：

<input type="submit" value="Submit" disabled={(this.state.value == "" ? true : false )} />
<input type="reset" value="Reset" onClick={this.handleReset} disabled={(this.state.value == "" ? true : false )}/>

2) 拥有一个内部状态，并在每次与文本输入交互时更新它：

<input type="submit" value="Submit" disabled={ this.state.formDisabled } />
<input type="reset" value="Reset" onClick={this.handleReset} disabled={ this.state.formDisabled } />

【问题讨论】：

我个人认为您的第一个选项是最好的。你甚至可以写disabled={this.state.value === ""}
我猜选项 1 足够好，选项 2 也有效，但如果 formDisabled 将用于启用/禁用不同的功能，我将使用它
@LucaRossi 我同意这一点。如果你有额外的状态可能是个好主意，例如只想在用户单击提交按钮时显示错误，但没有必要为 this.state.value === "" 设置额外的状态。
如果表单有更多输入，那么调用一个函数来确定按钮是否被禁用是有意义的。但是由于您的逻辑非常简单，因此可以快速进行内联相等检查。
我也会投票给第一个选项。如果要求很简单，请保持简单。当您需要更复杂的东西时，您将对其进行重构，但现在，保持接近值是简单、易读且高效的。

标签： javascript reactjs

【解决方案1】：

我会做这样的事情。

<input type="submit" value="Submit" disabled={!this.state.value} />
<input type="reset" value="Reset" onClick={this.handleReset} disabled{!this.state.value}/>

【讨论】：