diff --git a/packages/core/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx b/packages/core/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx
index 1142429eb42..b243a78d22c 100644
--- a/packages/core/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx
+++ b/packages/core/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx
@@ -8,72 +8,101 @@ export interface IRedBlackStrategyAdditionalFieldsProps extends IDeploymentStrat
   command: IRedBlackCommand;
 }
 
-export const AdditionalFields = ({ command, onChange }: IRedBlackStrategyAdditionalFieldsProps) => (
-  <div className="form-group">
-    <div className="col-md-12 checkbox">
-      <label>
-        <input
-          type="checkbox"
-          checked={command.rollback?.onFailure ?? false}
-          onChange={(e) => onChange('rollback.onFailure', e.target.checked)}
-        />
-        Rollback to previous server group if deployment fails <HelpField id="strategy.redblack.rollback" />
-      </label>
-    </div>
-    <div className="col-md-12 checkbox">
-      <label>
-        <input type="checkbox" checked={command.scaleDown} onChange={(e) => onChange('scaleDown', e.target.checked)} />
-        Scale down replaced server groups to zero instances
-        <HelpField id="strategy.redblack.scaleDown" />
-      </label>
-    </div>
-    <div className="col-md-12 form-inline">
-      <label>
-        Maximum number of server groups to leave
-        <HelpField id="strategy.redblack.maxRemainingAsgs" />
-      </label>
-      <input
-        className="form-control input-sm"
-        style={{ width: '50px' }}
-        type="number"
-        value={command.maxRemainingAsgs}
-        onChange={(e) => onChange('maxRemainingAsgs', e.target.value)}
-        min="2"
-      />
-    </div>
-    <div className="col-md-12 form-inline">
-      <label>
-        Wait Before Disable
-        <HelpField content="Time to wait before disabling all old server groups in this cluster" />
-      </label>
-      <input
-        className="form-control input-sm"
-        style={{ width: '60px' }}
-        min="0"
-        type="number"
-        value={command.delayBeforeDisableSec}
-        onChange={(e) => onChange('delayBeforeDisableSec', e.target.value)}
-        placeholder="0"
-      />
-      seconds
-    </div>
-    {command.scaleDown && (
-      <div className="col-md-12 form-inline" style={{ marginTop: '5px' }}>
-        <label>
-          Wait Before Scale Down
-          <HelpField content="Time to wait before scaling down all old server groups in this cluster" />
-        </label>
-        <input
-          className="form-control input-sm"
-          style={{ width: '60px' }}
-          min="0"
-          type="number"
-          value={command.delayBeforeScaleDownSec}
-          onChange={(e) => onChange('delayBeforeScaleDownSec', e.target.value)}
-          placeholder="0"
-        />
-        seconds
+export class AdditionalFields extends React.Component<IRedBlackStrategyAdditionalFieldsProps> {
+  private rollbackOnFailureChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.props.command.rollback.onFailure = e.target.checked;
+    this.forceUpdate();
+  };
+
+  private scaleDownChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.props.command.scaleDown = e.target.checked;
+    this.forceUpdate();
+  };
+
+  private maxRemainingAsgsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.props.command.maxRemainingAsgs = parseInt(e.target.value, 10);
+    this.forceUpdate();
+  };
+
+  private delayBeforeDisableSecChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.props.command.delayBeforeDisableSec = parseInt(e.target.value, 10);
+    this.forceUpdate();
+  };
+
+  private delayBeforeScaleDownSecChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.props.command.delayBeforeScaleDownSec = parseInt(e.target.value, 10);
+    this.forceUpdate();
+  };
+
+  public render() {
+    const { command } = this.props;
+    return (
+      <div className="form-group">
+        <div className="col-md-12 checkbox" style={{ marginTop: 0 }}>
+          <label>
+            <input
+              type="checkbox"
+              checked={command.rollback?.onFailure ?? false}
+              onChange={this.rollbackOnFailureChange}
+            />
+            Rollback to previous server group if deployment fails <HelpField id="strategy.redblack.rollback" />
+          </label>
+        </div>
+        <div className="col-md-12 checkbox">
+          <label>
+            <input type="checkbox" checked={command.scaleDown} onChange={this.scaleDownChange} />
+            Scale down replaced server groups to zero instances <HelpField id="strategy.redblack.scaleDown" />
+          </label>
+        </div>
+        <div className="col-md-12 form-inline">
+          <label>
+            Maximum number of server groups to leave
+            <HelpField id="strategy.redblack.maxRemainingAsgs" />
+          </label>
+          <input
+            className="form-control input-sm"
+            style={{ width: '50px' }}
+            type="number"
+            value={command.maxRemainingAsgs}
+            onChange={this.maxRemainingAsgsChange}
+            min="2"
+          />
+        </div>
+        <div className="col-md-12 form-inline">
+          <label>
+            Wait Before Disable
+            <HelpField content="Time to wait before disabling all old server groups in this cluster" />
+          </label>
+          <input
+            className="form-control input-sm"
+            style={{ width: '60px' }}
+            min="0"
+            type="number"
+            value={command.delayBeforeDisableSec}
+            onChange={this.delayBeforeDisableSecChange}
+            placeholder="0"
+          />
+          seconds
+        </div>
+        {command.scaleDown && (
+          <div className="col-md-12 form-inline" style={{ marginTop: '5px' }}>
+            <label>
+              Wait Before Scale Down
+              <HelpField content="Time to wait before scaling down all old server groups in this cluster" />
+            </label>
+            <input
+              className="form-control input-sm"
+              style={{ width: '60px' }}
+              min="0"
+              type="number"
+              value={command.delayBeforeScaleDownSec}
+              onChange={this.delayBeforeScaleDownSecChange}
+              placeholder="0"
+            />
+            seconds
+          </div>
+        )}
       </div>
-    )}
-  </div>
-);
+    );
+  }
+}