Javascript 如何将分组文本字段值设置为状态？

我正在用react建立一个网站。我创建了一个包含分组Textfield的组件，我不知道如何将这些Textfield的值设置为状态。 状态格式应该是：

state:{products:[{}，{}，{}]}

我试图创建一个按钮来插入新的Textfield组，并创建一个handleChange方法来捕获Textvalue， 但仍然停留在如何设置状态上

export default class extends Component {
    state = {
        count: 0,

        products: []
    };

    handleAddClick = () => {
        this.setState(({count}) => ({
            count: count + 1
        }))
    };

    handleChange = e => {
        //this is where i stuck
    };

    render() {
        const {count} = this.state;
        let items = [];
        for (let i = 0; i <= count; i++) {
            items.push(
                <div key={i}>
                    <TextField
                        label="product"
                        margin="normal"
                        onChange={this.handleChange}
                    />
                    <TextField
                        label="color"
                        margin="normal"
                        onChange={this.handleChange}
                    />
                    <TextField
                        label="quantity"
                        margin="normal"
                        onChange={this.handleChange}
                    />
                    <TextField
                        label="price"
                        margin="normal"
                        onChange={this.handleChange}
                    />
                </div>
            )
        }
        return <Fragment>
            <Button onClick={this.handleAddClick}>
                <AddIcon/>
            </Button>
            {items}
        </Fragment>
    }
}

导出默认类扩展组件{
状态={
计数：0，
产品：[]
};
HandLeadClick=（）=>{
this.setState（（{count}）=>({
计数：计数+1
}))
};
handleChange=e=>{
//这就是我卡住的地方
};
render（）{
const{count}=this.state；
设项目=[]；
对于（让i=0；i您的状态似乎不正确，您需要再添加一个键来处理输入更改，我们将其称为
product
。因此，此产品将处理当前文本框，一旦用户单击“添加”按钮，您就可以将其添加到产品数组中。这将生成一个对象

state = {
  count: 0,
  product:{},
  products: [],
};

用键传递textfield值，以便填充产品对象键

<TextField value={this.state.product.product}
   label="product"
   type="text"
   margin="normal"
   onChange={(e) => { this.handleChange(e, 'product') }}
 />

当用户单击add时，您可以将此产品推送到products阵列

handleAddClick = () => {
  this.setState({ 
    products: this.state.products.concat(this.state.product), 
    product: {}, 
  })
};

以下是组件的外观：

将输入替换为
文本字段
，将按钮替换为
按钮

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  state = {
    count: 0,
    product: {},
    products: [],
  };

  handleAddClick = () => {
    this.setState({ 
      products: this.state.products.concat(this.state.product), 
      product: { 
        product: "",
        color: "",
        quantity: "",
        price: "",
      }
    })
  };

  handleChange = (e, type) => {
    //this is where i stuck
    this.setState({ 
      product: { 
        ...this.state.product, [
          type]: e.target.value, 
      } 
    });
  };

  render() {
    console.log(this.state);
    const { count } = this.state;
    let items = [];
    for (let i = 0; i <= count; i++) {
      items.push(
        <div key={i}>
          <input value={this.state.product.product}
            label="product" type="text"
            margin="normal"
            onChange={(e) => { this.handleChange(e, 'product') }}
          />
          <input value={this.state.product.color}
            label="color"
            margin="normal"
            onChange={(e) => { this.handleChange(e, 'color') }}
          />
          <input value={this.state.product.quantity}
            label="quantity"
            margin="normal"
            onChange={(e) => { this.handleChange(e, 'quantity') }}
          />
          <input value={this.state.product.price}
            label="price"
            margin="normal"
            onChange={(e) => { this.handleChange(e, 'price') }}
          />
        </div>
      )
    }
    return (
      <div>
        <button onClick={this.handleAddClick}>
          add
        </button>
        {items}
      </div>
    )
  }
}



render(<App />, document.getElementById('root'));

当用户按顺序键入时，此代码可以正常工作，但如果用户先单击“添加”按钮，然后单击“键入”，该怎么办？如何修改产品的相应元素array@Russell为此，您需要将初始值置于状态，
state={count:0，product:{product:，color:，quantity:，price:}，products:[]}；
像这样添加按钮是为了创建一组新的文本字段，所以我需要计数状态，我还定义了render方法中的items数组，当用户单击添加按钮时，每次您的代码完美地解决了我的问题时，他们实际上会得到4个额外的文本字段，非常感谢！@Russell很高兴这有帮助
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  state = {
    count: 0,
    product: {},
    products: [],
  };

  handleAddClick = () => {
    this.setState({ 
      products: this.state.products.concat(this.state.product), 
      product: { 
        product: "",
        color: "",
        quantity: "",
        price: "",
      }
    })
  };

  handleChange = (e, type) => {
    //this is where i stuck
    this.setState({ 
      product: { 
        ...this.state.product, [
          type]: e.target.value, 
      } 
    });
  };

  render() {
    console.log(this.state);
    const { count } = this.state;
    let items = [];
    for (let i = 0; i <= count; i++) {
      items.push(
        <div key={i}>
          <input value={this.state.product.product}
            label="product" type="text"
            margin="normal"
            onChange={(e) => { this.handleChange(e, 'product') }}
          />
          <input value={this.state.product.color}
            label="color"
            margin="normal"
            onChange={(e) => { this.handleChange(e, 'color') }}
          />
          <input value={this.state.product.quantity}
            label="quantity"
            margin="normal"
            onChange={(e) => { this.handleChange(e, 'quantity') }}
          />
          <input value={this.state.product.price}
            label="price"
            margin="normal"
            onChange={(e) => { this.handleChange(e, 'price') }}
          />
        </div>
      )
    }
    return (
      <div>
        <button onClick={this.handleAddClick}>
          add
        </button>
        {items}
      </div>
    )
  }
}



render(<App />, document.getElementById('root'));

let product = { 
  product: "",
  color: "",
  quantity: "",
  price: "",
};
class App extends Component {
  state = {   
    products: [Object.assign({},product)],
  };

  handleAddClick = () => {  
    var newProduce = {
      product: "", 
      color: "", 
      quantity: "", 
      price: "", 
    }    
    this.setState({ 
      products: this.state.products.concat(newProduce),
    })
  };

  handleChange = (e, type, index) => {
    const copiedData = Object.assign({}, this.state);
    copiedData.products[index][type] = e.target.value;    
    this.setState(copiedData);
  };
  ...