reactjs - 如何使用 React 构建大型表单

问题描述

我正在创建一个大表单来制作具有许多组件的新产品，例如“描述、图像、价格等”。

我的想法是为“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;

有什么建议吗？

标签： reactjsforms

reactjs - 如何使用 React 构建大型表单

问题描述

解决方案

推荐阅读