テーブルにレコードを追加します。endendブラウザで動作確認をしましょう。新しいタスクのタイトルを書き入れて...ボタンをクリックすると...タスクが追加されました。タスク追加が済んだらフォームに記入したタイトルは消えてほしいところです。メソッドを次のように書き換えます。}変更点は下から4行目です。引数の値にセットしてから、フィールドの元の値を返します。メソッドに渡しています。ブラウザで動作確認をしてください。改善をしてみましょう。現状では、タイトルが空のままでもボタンをクリックできて、中身のないタスクが作られてしまいます。タイトルが空である間は、ボタンを無効化することにしましょう。効果が見えやすいようにスタイルシートの準備をします。次のように書き換えてください(3行追加)。メソッドを次のように変更します。}2行追加しています。挿入して、タイトルフィールドの中身が書き換わるたびにコンポーネントの再描画を行っています。キーボードのキーが押されて上がった際に発生します。マウスを使って文字列が貼り付けられた時にも発生します。ひとつ挿入されたのは次のコードです。});ちょっとややこしく見えますが、単純なことです。属性をボタンに設定しています。ユーザーがタイトルフィールドの中身を書き換えるたびに、コンポーネント全体が再描画されます。中身が空ならボタンが無効化され、空でなければ有効化されます。ブラウザをリロードした直後の画面では、次のようにボタンが無効化されています。文字を書き入れると、ボタンが有効化されます。「あ」を削除すれば再び無効化されます。実現するのは意外に面倒です。次回は、タスクのタイトルを編集する機能を作ります。