如何使多个字段的动态状态反应？ [英] How to make dynamic state for multiple fields in react?

问题描述

class Bills extends Component {
constructor(props) {
    super(props)
    this.state = {
        productName: '',
        price: 0,
        quantity: 0,
        noOfProductsField: 0
    }
}
handleChange = name => event => {
    this.setState({
        [name]: event.target.value,
    });
};

createFields = () => {
        const { classes } = this.props;
        let children = []
        for (let i = 0; i < this.state.noOfProductsField; i++) {
            children.push(
                <div>
                    <Select
                        className={classes.textField}
                         value = { this.state[i] }
                    onChange={this.handleChange('productName')}
                        displayEmpty
                        SelectProps={{
                            MenuProps: {
                                className: classes.menu,
                            }
                        }}>
                        <MenuItem value="" disabled>
                            Select Product
                           </MenuItem>
                        {this.state.products.map((option, ind) => (
                            <MenuItem key={ind} value={option.productName}>
                                {option.productName}
                            </MenuItem>
                        ))}
                    </Select>
                    <TextField className={classes.textField} placeholder='Price' type='number' onChange={this.handleChange('price')} />
                    <TextField className={classes.textField} placeholder='Quantity' type='number' onChange={this.handleChange('quantity')} />
                </div>
            )
        }
        return children
    }
}

我有这个函数在for循环中创建3个输入字段

I Have this function which is creating 3 input fields in for loop

• productName


• 价格


• 数量

例如，如果循环运行2次，则会创建6如下图所示的字段：

For Example if loop is running 2 times it will create 6 fields like image below:

所以现在我想以不同方式管理所有6个字段的状态
我该怎么做？

So now i want to manage state for all 6 fields differently How can i do that ?

推荐答案

您需要创建动态表单输入吗？所以你可以做的是你可以将产品的名称传递给你处理程序 this.handleChange（'productName'），然后你可以做类似下面的事情。在您的情况下，您将需要使用计算属性名称，以便动态设置状态（就像您已经在做的那样）

You need to create dynamic form inputs right? So what you can do is you can pass the name of the product to you handler this.handleChange('productName') and then you can do something like following. In your case you will need to use computed property name so as to dynamically set the state(like you are already doing)

handleChange = name => event => {
    //more logic here as per the requirement
    this.setState({
        [name]: event.target.value,
    });
};

或者您可以为产品，价格，数量创建单独的onChange处理程序。

Or you can create seperate onChange handlers each for product, price, quantity.

handleProductChange = (name) => (evt) => {
    const newProducts = this.state.products.map((product, pidx) => {
      if (name !== product.productName) return product;
      return { ...product, productName: evt.target.value };
    });

    this.setState({ products: newProducts });
}

快速流程当产品onChange发生时你可以将产品存储在procucts数组中（处于状态），当价格发生变化时，您可以发送产品名称并将产品与价格和数量一起映射。

Quick flow: When product onChange occurrs you can store the product in the procucts array(in state) and when price change will occure you can send the product name along with it and map the product with price and quantity.

这里你可以找到一个漂亮的JS bin副本与React，精确你希望实现同样的目标。

Here you can find a nice JS bin replica with React, of exact same thing you want to achieve.

这篇关于如何使多个字段的动态状态反应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！