diff --git a/docs/app/Examples/collections/Form/Usage/FormExampleCaptureValues.js b/docs/app/Examples/collections/Form/Usage/FormExampleCaptureValues.js new file mode 100644 index 0000000000..a2f9a25ea7 --- /dev/null +++ b/docs/app/Examples/collections/Form/Usage/FormExampleCaptureValues.js @@ -0,0 +1,37 @@ +import React, { Component } from 'react' +import { Form } from 'semantic-ui-react' + +class FormExampleCaptureValues extends Component { + state = { name: '', email: '', submittedName: '', submittedEmail: '' } + + handleChange = (e, { name, value }) => this.setState({ [name]: value }) + + handleSubmit = e => { + e.preventDefault() + const { name, email } = this.state + + this.setState({ submittedName: name, submittedEmail: email }) + } + + render() { + const { name, email, submittedName, submittedEmail } = this.state + + return ( +
+
+ + + + + +
+ onChange: +
{JSON.stringify({ name, email }, null, 2)}
+ onSubmit: +
{JSON.stringify({ submittedName, submittedEmail }, null, 2)}
+
+ ) + } +} + +export default FormExampleCaptureValues diff --git a/docs/app/Examples/collections/Form/Usage/FormExampleClearOnSubmit.js b/docs/app/Examples/collections/Form/Usage/FormExampleClearOnSubmit.js new file mode 100644 index 0000000000..8197f568d6 --- /dev/null +++ b/docs/app/Examples/collections/Form/Usage/FormExampleClearOnSubmit.js @@ -0,0 +1,29 @@ +import React, { Component } from 'react' +import { Form } from 'semantic-ui-react' + +class FormExampleClearOnSubmit extends Component { + state = {} + + handleChange = (e, { name, value }) => this.setState({ [name]: value }) + + handleSubmit = e => { + e.preventDefault() + this.setState({ email: '', name: '' }) + } + + render() { + const { name, email } = this.state + + return ( +
+ + + + + +
+ ) + } +} + +export default FormExampleClearOnSubmit diff --git a/docs/app/Examples/collections/Form/Usage/index.js b/docs/app/Examples/collections/Form/Usage/index.js new file mode 100644 index 0000000000..61d9771bda --- /dev/null +++ b/docs/app/Examples/collections/Form/Usage/index.js @@ -0,0 +1,36 @@ +import React from 'react' +import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' +import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' + +import { Message, Icon } from 'src' + +const FormFormUsageExamples = () => ( + + + + + Tip +

+ Our {'

'} handles data just like a vanilla React {''}. + See React's + + {' '}controlled components{' '} + + docs for more. +

+ + + + + +) + +export default FormFormUsageExamples diff --git a/docs/app/Examples/collections/Form/index.js b/docs/app/Examples/collections/Form/index.js index c00245d9f2..270bad7a9d 100644 --- a/docs/app/Examples/collections/Form/index.js +++ b/docs/app/Examples/collections/Form/index.js @@ -6,6 +6,7 @@ import Shorthand from './Shorthand' import FieldVariations from './FieldVariations' import GroupVariations from './GroupVariations' import States from './States' +import Usage from './Usage' const FormExamples = () => (
@@ -16,6 +17,7 @@ const FormExamples = () => ( +
)