10 examples of 'react js form with multiple components' in JavaScript

Every line of 'react js form with multiple components' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
8export default function withFormValue(Component) {
9
10 let displayName = Component.displayName || Component.name;
11
12 return class extends FormComponent {
13
14 static displayName = `WithFormValue(${displayName})`;
15
16 render() {
17 return (
18 <Component
19 {...this.props}
20 formValue={this.formValue}
21 />
22 );
23 }
24 };
25}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

25render() {
26 const {forwardedRef, ...otherProps} = this.props;
27 return (
28 <FormContext.Consumer>
29 {formContext => (
30 // $FlowFixMe looks right to me
31 <Component
32 {...otherProps}
33 formContext={formContext}
34 ref={forwardedRef}
35 />
36 )}
37 </FormContext.Consumer>
38 );
39}
7render() {
8 return (
9 <FormContext.Consumer>
10 {formContext => <WrappedComponent {...this.props} formContext={formContext} />}
11 </FormContext.Consumer>
12 );
13}
5getTemplate(){ return "React.createElement(\"form\", {name: this.props.name, ref: this.props.name, className: \"form-inline\"}, this.props.children)";}
116renderForm() {
117 return render({
118 type: 'page',
119 title: '',
120 body: {
121 ...amisFormSchema,
122 onChange: values =>
123 this.setState({
124 data: {
125 ...values
126 }
127 })
128 }
129 });
130}
11export function registerComponent(name: string, component: Function, rendersMultiple?: boolean) {
12 if (rendersMultiple != null) (component as any).rendersMultiple = rendersMultiple;
13 components[name] = component;
14}
134var component = function component() {
135 var value = (0, _has2["default"])(conf, 'parse') ? (0, _moment["default"])(input.value, (0, _get2["default"])(conf, 'parse')) : (0, _moment["default"])(input.value);
136 return _react["default"].createElement(_reactDatetime["default"], _extends({
137 key: props.name,
138 onChange: function onChange(val) {
139 input.onChange((0, _has2["default"])(conf, 'parse') ? (0, _moment["default"])(val).format((0, _get2["default"])(conf, 'parse')) : val);
140 },
141 value: value
142 }, add, (0, _omit2["default"])(conf, ['parse']), {
143 inputProps: {
144 disabled: disabled
145 }
146 }));
147};
7render() {
8 var formType = super.getFormType();
9
10 var props = _.clone(this.props);
11
12 if(props.options){
13 var options = [];
14 _.forIn(props.options, (label, value) => {
15 options.push(<option value={value}>{label}</option>);
16 });
17 props.children = options;
18 }
19
20 if (formType == 'vertical') {
21 return React.createElement(VerticalSelect, props, this.props.children);
22 }
23
24 if (formType == 'horizontal') {
25 return React.createElement(HorizontalSelect, props, this.props.children);
26 }
27
28 return null;
29}
140static getValueFromComponent(component:ReactComponent):?Object {
141 if (component.props.value instanceof Object) {
142 return component.props.value
143 } else if (component.props.for instanceof Object) {
144 return component.props.for
145 } else {
146 return null
147 }
148}
156render() {
157 const { config } = this.props
158 return createElement(
159 'div',
160 { className: 'react-forms-group' },
161 createElement('div', { className: 'group-title' }, config.displayName),
162 createElement(
163 'p',
164 { className: 'group-description' },
165 config.description,
166 ),
167 createElement(
168 'div',
169 { className: 'react-forms-group-elements' },
170 this.props.children,
171 ),
172 )
173}

Related snippets