Как добавить DIV при отображении объекта состояния в React, чтобы разрешить добавление DIV по мере необходимости

Question

Шаблон формы регистрации

import React from 'react';
import classes from '../../../assets/css/forms.css'


const SignupFormTemplate =(props) => {
    let inputElement = null;

    switch ( props.elementType ) {
        case ( 'input' ):
            inputElement = <input
                className= 'inputElement'
                {...props.elementConfig}
                value={props.value}
                onChange={props.changed} />;
            break;
        case ( 'textarea' ):
            inputElement = <textarea
                className='signup_input'
                {...props.elementConfig}
                value={props.value}
                onChange={props.changed} />;
            break;
        case ( 'select' ):
            inputElement = (
                <select
                    className={classes.signup_input}
                    value={props.value}
                    onChange={props.changed}>
                    {props.elementConfig.options.map(option => (
                        <option key={option.value} value={option.value}>
                            {option.displayValue}
                        </option>
                    ))}
                </select>
            );
            break;
        default:
            inputElement = <input
                className={classes.signup_input}
                {...props.elementConfig}
                value={props.value}
                onChange={props.changed} />;
    }

    return (
        <div className='input_signup'>
            {inputElement}
        </div>
    );

};

export default SignupFormTemplate;

Компонент, в котором я отображаю объект состояния в динамическую форму

import React, {Component} from 'react';
import SignupFormTemplate from './SignupFormTemplate'

class SignupStateNavigation extends Component {

    state = {
        step: 1,
        signupForm: {
            firstName: {
                elementType: 'input',
                elementConfig: {
                    type: 'text',
                    placeholder: 'First Name',
                    className: 'inputElement half_width',
                },
                value: '',
                validation: {
                    required: true
                },
                valid: false

            },
            lastName: {
                elementType: 'input',
                elementConfig: {
                    type: 'text',
                    placeholder: 'Last Name',
                    className: 'inputElement half_width',
                },
                value: '',
                validation: {
                    required: true
                },
                valid: false
            },
            email_mobile: {
                elementType: 'input',
                elementConfig: {
                    type: 'email',
                    placeholder: 'Email or Mobile Number',
                },
                value: '',
                validation: {
                    required: true
                },
                valid: false
            },
            pwd: {
                elementType: 'input',
                elementConfig: {
                    type: 'password',
                    placeholder: 'Type Password',
                },
                value: '',
                validation: {
                    required: true
                },
                valid: false
            },
            dd: {
                elementType: 'input',
                elementConfig: {
                    type: 'number',
                    placeholder: 'DD',
                    className: 'width_32p inputElement',
                },
                value: '',
                validation: {
                    required: true
                },
                valid: false
            },
            mm: {
                elementType: 'input',
                elementConfig: {
                    type: 'number',
                    placeholder: 'MM',
                    className: 'width_32p inputElement',
                },
                value: '',
                validation: {
                    required: true
                },
                valid: false
            },
            yyyy: {
                elementType: 'input',
                elementConfig: {
                    type: 'number',
                    placeholder: 'YYYY',
                    className: 'width_32p inputElement',
                },
                value: '',
                validation: {
                    required: true
                },
                valid: false
            },
        }
    };


    inputChangedHandler = (event, inputIdentifier) => {
        event.preventDefault();
        const updatedSignupForm = {
            ...this.state.signupForm
        };
        const updatedSignupElement = {
            ...updatedSignupForm[inputIdentifier]
        };
        updatedSignupElement.value = event.target.value;
        updatedSignupForm[inputIdentifier] = updatedSignupElement;
        this.setState({signupForm: updatedSignupForm});
    };

    render () {

        const formElementsArray = [];
        for (let key in this.state.signupForm) {
            formElementsArray.push({
                id: key,
                config: this.state.signupForm[key]
            });
        }

        let form = (
            <form onSubmit={this.inputChangedHandler}>
                <React.Fragment>
                    {formElementsArray.map(formElement => (
                        <SignupFormTemplate
                            key={formElement.id}
                            elementType={formElement.config.elementType}
                            elementConfig={formElement.config.elementConfig}
                            value={formElement.config.value}
                            changed={(event) => this.inputChangedHandler(event,formElement.id)}
                        />
                    ))}
                    <button type='submit' onSubmit={this.inputChangedHandler} className='ak-button__appearance-primary'> Signup </button>
                </React.Fragment>
            </form>
        );

        return (
            <div className='form-wrapper'>
                <div className='input-styler'>
                    {form}
                </div>
            </div>
        );
    }
}

    export default SignupStateNavigation;

CSSSTYLING

.input_signup {
    width: 100%;
    padding: 7px 12px;
    box-sizing: border-box;
}
.inputElement {
    outline: none;
    font: inherit;
    padding: 9px 10px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 2px;
    background-color: rgb(250, 251, 252);
    border-color: rgb(223, 225, 230);
    border-width: 1px;
    border-style: solid;
}
.inputElement:focus {
    outline: none;
    border: 1px solid #000;
    background: #fff;
    font: inherit;
}
input.inputElement.half_width {
    display: flex;
    width: 48%;
}

Я хочу добавить элементы DIV, чтобы я мог применить CSS-стиль к ИМЕНЕ И ПОСЛЕДНЕМУ ИМЯ, чтобы привести оба поля в ряд.

Тот же случайдля даты рождения, я хочу, чтобы эти 3 входа также были в строке.

ПРОВЕРЬТЕ ЭТУ ССЫЛКУ, ПОКАЗЫВАЯ ФОРМУ ТЕКСТА

Answer 1

Вы можете добавить еще один elementType для 'group', где вы можете передать входные данные как свойство элемента и просмотреть их в компоненте RegistrationFormTemplate.

class SignupStateNavigation extends React.Component {
  state = {
    step: 1,
    signupForm: {
      // OTHER INPUTS
      anotherInput: {
        value: 'anotherInput',
      },
      // NEW TYPE OF ELEMENT
      groupOne: {
        elementType: 'group',
        // PASS YOUR INPUTS HERE
        inputs: {
          firstName: {
            value: 'firstName'
          },
          lastName: {
            value: 'lastName'
          },
        }
      }
    }
  };

  render () {
    const inputs = this.state.signupForm;

    let form = (
      <form onSubmit={this.inputChangedHandler}>
        <React.Fragment>
          {Object.keys(inputs).map(function(key) {                   
            return <SignupFormTemplate key={key} {...inputs[key]} />
          })}
        </React.Fragment>
      </form>
    );

    return (
      <div className='form-wrapper'>
        <div className='input-styler'>
          {form}
        </div>
      </div>
    );
  }
}

Затем использовать новый elementType 'group'в вашем компоненте RegistrationFormTemplate.

const SignupFormTemplate = (props) => {
  const elementType = props.elementType;
  let inputElement;

  switch ( elementType ) {
    case ( 'group' ):
      // IF OF TYPE GROUP LOOP THROUGH INPUTS AGAIN
      const inputs = props.inputs;

      inputElement = (
        <div className="input_group">
          {Object.keys(inputs).map(function(key) {
            return <SignupFormTemplate key={key} {...inputs[key]} />
          })}
        </div>
      )

      break;

    default:
      inputElement = <input value={props.value} />;
  }

  return (
    <div className='input_signup'>
      {inputElement}
    </div>
  );
};

Рабочая скрипка: https://jsfiddle.net/f9h03y1z/8/