Forms React.js-将更改处理程序函数传递给深层嵌套表单组件

我有一个表单，我想使用React.js呈现它，还允许用户编辑输入并将其提交给服务器。这是一份产品清单。每个tr表示一个产品id，其数量、名称、价格、类别可由用户更改。它有下拉列表和文本输入

我想将其分解为以下几个部分：

产品列表

产品

分类水解

产品列表包含产品包含类别细分。现在，我必须将handleCategoryChange函数传递给CategoryDown组件。因此，ProductList将此作为道具传递给产品，后者将其作为道具传递给categorhydropdown

这条路对吗？如果我的表单变得更复杂，嵌套的组件更深，该怎么办？我应该一直将处理函数作为属性从上到下传递吗？或者我应该考虑使用<强> ReDux < /强>？/P>

<form>
    <table>
        <tr>
            <td><input type="hidden" name="productId" value="101"/></td>
            <td><input type="text" name="quantity"/></td>
            <td><input type="text" name="productName"/></td>
            <td><input type="text" name="productPrice"/></td>
            <td>
                <select name="productCategory">
                    <option value="1"> Soap </option>
                    <option value="2"> Shampoo </option>
                </select>
            </td>
        </tr>
        <tr>
            <td><input type="hidden" name="productId" value="102"/></td>
            <td><input type="text" name="quantity"/></td>
            <td><input type="text" name="productName"/></td>
            <td><input type="text" name="productPrice"/></td>
            <td>
                <select name="productCategory">
                    <option value="1"> Soap </option>
                    <option value="2"> Shampoo </option>
                </select>
            </td>
        </tr>
    </table>
</form>

香皂
洗发水
香皂
洗发水

您可以将某种onChange函数从窗体向下传递给所有子级和子级

---

或者，您可以使用redux（或类似工具）将所有这些数据保存在应用商店中。一旦表单提交，您就可以从存储中获取所有内容，而无需在组件树上下传递任何内容

我的建议是维护

产品

组件，其形式为

状态

，具有

onCategoryChange

处理程序

你需要这样的东西

产品列表组件：

class ProductList extends Component{
  constructor(props){
    this.state = {
      products: [...this.props.products]; //your actual products
    }
  }

  handleEachProduct(){
    //takes data from each product component
    //updates to products in state
  }
  handleSubmit(){
    //submiy entire products in state
  }
  render(){
    return(
      <table>
        {
          this.state.products.map(product => {
            return(
              <Product data={product} submitProduct={this.handleEachProduct.bind(this)} />
            )
          })
        }
      </table>
    )
  }
}

类ProductList扩展组件{
建造师（道具）{
此.state={
产品：[…this.props.products]；//您的实际产品
}
}
handleEachProduct（）{
//从每个产品组件获取数据
//状态中的产品更新
}
handleSubmit（）{
//亚美整个产品处于状态
}
render（）{
返回(
{
this.state.products.map（product=>{
返回(
)
})
}
)
}
}

产品组件。

class Product extends Component{
  constructor(props){
    this.state = {
      quantity: value,
      productCategory: value
      //similarly all values
    }
  }
  componentWillMount(){
    this.setState(this.props.data);
  }
  onCategoryChange(e){
    this.setState({productCategory:e.target.value }, function(){
    this.props.submitProduct(this.state); //updates state of product to ProductList
    });
    //Similarly change handlers for all values in product
  }
  render(){
    retrun(
      <tr>
            <td><input type="hidden" name="productId" value="101"/></td>
            <td><input type="text" name="quantity"/></td>
            <td><input type="text" name="productName"/></td>
            <td><input type="text" name="productPrice"/></td>
            <td>
                <select name="productCategory" onChange={this.onCategoryChange}>
                    <option value="1"> Soap </option>
                    <option value="2"> Shampoo </option>
                </select>
            </td>
        </tr>
    )
  }
}

类产品扩展组件{
建造师（道具）{
此.state={
数量：价值，
产品类别：价值
//类似地，所有值
}
}
组件willmount（）{
this.setState（this.props.data）；
}
onCategoryChange（e）{
this.setState（{productCategory:e.target.value}，function（））{
this.props.submitProduct（this.state）；//将产品状态更新为ProductList
});
//类似地，更改产品中所有值的处理程序
}
render（）{
重新运行(
香皂
洗发水
)
}
}

您基本上重新表述了我的问题：-）它与您的应用程序无关。如果您只有这个表单，那么最好的解决方案可能是使用redux存储。如果您有一个更大的应用程序，并且不想将临时表单值添加到存储中，那么可以将onChange传递到树下。这真的取决于你有什么。使用redux（或类似的东西）通常是一种更好的方法，但这可能是对您所拥有的东西的一种过度使用。感谢您的努力，几乎将其编码起来。。。方法也不错