Как вырастить большие формы с реагировать

Question

Я создаю большую форму для создания нового продукта со многими компонентами, такими как «Описание, изображения, цены и т. Д.».

Моя идея состоит в том, чтобы создать контейнер для «NewProduct» и внутри его вызова множество компонентов малой формы.

Мои проблемы в том, что я не знаю, что такое хорошая практика, чтобы сделать это.

Я имею в виду, что каждый компонент имеет свою собственную проверку, но эти проверки будут запускаться компонентом «Отец» при отправке.

И я хочу получить форму «Состояние каждого» и настроить ее внутри.от государства-отца.

Это мой фактический код для NewProductContainer :

class NewProductSection extends React.Component{
constructor(props) {
    super(props);
    this.state = {
      description: {
          name:"",
          description:"",
      },
      images: [],
      prices: {
          price:"",
          price_compare:"",
          flat_price:""
      },
      inventory: {
          sku:"",
          bar_code: "",
          quantity: "",
      },
      shipping: {
        weight:"",
        logitic_service: "",
      },
      variants: [],
      seo: {
          page_title: "",
          meta_description: "",
          url:"",
      }


    };
  }
render(){
    return (
        <div className="row">
            <div className="col-8">
                <Description/>
                <LoadImages/>
                <ProductPrices/>
                <Inventory/>
                <Shipping/>
                <Variants/>
                <Seo/>
            </div>
            <div className="col-4">
                <Organization/>
            </div>
        </div>
    );
}
}

ОписаниеКомпонент

class Description extends React.Component{
    render(){
        return (
            <div className="card">
                <div className="card-body">
                    <div className="form-group">
                        <label htmlFor="inputAddress">Nombre</label>
                        <input type="textarea" className="form-control" id="inputAddress" placeholder="1234 Main St" />
                    </div>
                    <div className="form-group">
                        <label htmlFor="inputAddress">Description</label>
                        <textarea className="form-control" rows={5} id="comment" defaultValue={""} />
                    </div>
                </div>
            </div>
        )
    }
}

export default Description;

Любое предложение?

Answer 1

Я бы порекомендовал formik (см .: https://github.com/jaredpalmer/formik) и yup для проверки схемы.

Answer 2

Я рекомендую вам использовать формальный , это библиотека для обработки форм с помощью ловушек реагирования и избежания повторяющихся задач.