如何通過反應來判斷大型形式

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>
    );
}
}

DescriptionComponent

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

我建議你使用formal ，它是一個庫來處理帶有反應掛鈎的表單，避免重復的任務。

Answer 2

我建議使用formik（參見： https ： //github.com/jaredpalmer/formik ）和是用於模式驗證。