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

Question

我有一个要使用 React.js 呈现的表单，还允许用户编辑输入并将其提交到服务器。这是一个产品列表。每个tr代表一个产品id，其数量、名称、价格、类别可由用户更改。它有 dropdown 和 text 输入。

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

产品列表
产品
类别下拉列表

ProductList 包含 Product 包含 CategoryDropdown。现在我必须将 handleCategoryChange 函数传递给 CategoryDropDown 组件。所以 ProductList 会将其作为道具传递给 Product，后者会将其作为道具传递给 CategoryDropDown。

这是正确的方法吗？如果我的表单因嵌套更深的组件而变得更加复杂怎么办？我是否应该一直将处理函数作为属性从上到下传递？或者我应该考虑使用 redux?

<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

您可以将某种 onChange 函数从表单向下传递给所有子项和子项。

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

Answer 2

我的建议是使用具有 onCategoryChange 处理程序的 state 形式维护 product 组件。

你需要这样的东西。

ProductList 组件：

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

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

React.js - Passing change handler functions to deep nested form components

forms

reactjs

redux

react-redux