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>
  );
}

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

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 } />

Answer 1

我会做这样的事情。

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

处理输入禁用的正确方法？ ReactJS

1 个答案: