React.js - 將更改處理函數傳遞給深度嵌套窗體組件

Question

我有一個表單，我想要使用Relic.js呈現，並且還允許用戶編輯輸入並將其提交給服務器。這是一個產品清單。每個tr代表一個產品id，其數量，名稱，價格，類別可以由用戶更改。它有下拉框和文本輸入。

我想打破它在以下組件：

1. 產品列表
2. 產品
3. CategoryDropdown

產品列表包含產品包含CategoryDropdown。現在我必須通過handleCategoryChange函數到CategoryDropDown組件。所以產品列表將通過這個作爲一個道具產品它將通過它作爲支柱類別下降。

這是正確的方法嗎？如果我的表單變得更復雜，甚至更深的嵌套組件？我是否應該不斷地將處理函數作爲一個屬性從一直到最終傳遞？或者我應該考慮使用還原？

<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> 

Answer 1

我的建議是保持product組件state的形式有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> 
    ) 
    } 
} 

產品組件。

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

Answer 2

您可以通過降低某種功能的onChange從形式到所有的孩子& subchildren。

或者您可以使用redux（或類似的）並將所有這些數據保存在商店中。提交表單後，您可以從商店中獲取所有內容，而無需在組件樹上傳遞任何內容。