javascript - 处理输入禁用的正确方法？反应JS

Question

我正在学习 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 } />

标签： javascriptreactjs

Answer 1

我会做这样的事情。

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