javascript - 如何为 react 中的多个字段制作动态状态？

Question

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 个输入字段

• 产品名称
• 价格
• 数量

例如，如果循环运行 2 次，它将创建 6 个字段，如下图所示:

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

Answer 1

您需要创建动态表单输入吗？因此，您可以做的是将产品名称传递给处理程序 this.handleChange('productName')，然后您可以执行以下操作。在您的情况下，您将需要使用计算属性名称以便动态设置状态(就像您已经在做的那样)

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

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

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

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

Here您可以使用 React 找到一个不错的 JS bin 副本，与您想要实现的完全相同。