breaking(Form): remove onSubmit serializer

[levithomason]

Breaking Changes!

Form onSubmit no longer includes a second parameter with the serialized form values. The serializer was accomplished by reading from the DOM, which is an anti-pattern in React. The onSubmit prop itself remains in-tact and functions identically to a vanilla React form's onSubmit prop.

Fixes #1362. See the related issues #1348 and #833 for more context.

Before

class OrderView extends React.Component {
  handleSubmit = (e, formData) => {
    e.preventDefault()
    console.log('Quantity:', formData.quantity)
  }

  render() {
    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Input name='quantity' defaultValue={this.state.quantity} />
      </Form>
    )
  }
}

After

You should hoist your data up the tree by either setting state, or using a state management solution such as Redux.

setState Example

class OrderView extends React.Component {
  state = {}

  handleChange = (e) => this.setState({ quantity: e.target.value })

  handleSubmit = (e) => {
    e.preventDefault()
    console.log('Quantity:', this.state.quantity)
  }

  render() {
    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Input name='quantity' value={this.state.quantity} onChange={this.handleChange} />
      </Form>
    )
  }
}

[codecov-io]

Codecov Report

Merging #1367 into master will decrease coverage by -0.01%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #1367      +/-   ##
==========================================
- Coverage   99.75%   99.74%   -0.01%     
==========================================
  Files         140      140              
  Lines        2400     2345      -55     
==========================================
- Hits         2394     2339      -55     
  Misses          6        6

Impacted Files	Coverage Δ
src/collections/Form/Form.js	100% <ø> (ø)	✅

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 89a46e8...f11ac5a. Read the comment docs.

[levithomason]

Released in semantic-ui-react@0.66.0.

[qoalu]

Here is a handleToggle for Checkbox Groups state tracking compatible with the new API. Checkboxes have an unmanaged state and just pass current value up.

JSX:

<Form.Checkbox key={key} label={text} name='groupName' value={value1} onChange={this.handleToggle} />
<Form.Checkbox key={key} label={text} name='groupName' value={value2} onChange={this.handleToggle} />

<Form.Checkbox key={key} label={text} name='groupName' value={value3} onChange={this.handleToggle} />

Action Function:

handleToggle = (e, { name, value, checked }) => {
	this.setState({ [name]: {
		...this.state[name],
		[value]: checked
	}
	});
};

Resulting State:

this.state = {
	groupName: {
		"value1": false,
		"value2": false,
		"value3": false
	}
}