前回の続き。

お題

今回はちょっとしたお題。ユーザー名が未入力でもボタンが押せちゃうのは、ユーザービリティが良くないので改善します。具体的には、ユーザー名未入力の場合は、Updateボタンをdisableします。

以下のように、disable={!this.state.username}してあげるだけで実現できます。

class SearchBox extends React.Component {
  ... (snip) ...

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input type="text" onChange={this.handleChange} placeholder="Enter username" />
          <input type="submit" value="Update" disabled={!this.state.username} /> // <= (*) ここ
        </form>
      </div>
    );
  }

  ... (snip) ...
}

ポイントは以下でしょうか。