Question

如何在不更改状态中的所有数据的情况下更改状态的内容。

用于上下文;

下面的函数在另一个“handleChange”函数内部运行，该函数接受事件并将“event.target”中的各种数据分配给变量name，pos和value。 update函数创建并返回一个包含数组的对象。我使用该对象来更新状态。每次有一个调用整个函数的onchange事件时，状态只显示当前的onchange数据而不是之前已经经历过“更改”的输入的数据（我希望你理解我的意思）

进一步澄清;

我每次都在输入中使用“onChange”事件处理程序时尝试更新状态。我更改了输出的值，它反映了状态的变化（控制台完美地记录了变化），但是一旦我更改了另一个输入的值，状态中先前的变化就会消失。

我想更改输入的值，将该值存储在状态中，更改另一个输入具有该值也存储在数组..etc的对象中，然后能够访问所有值。我现在只能访问最新的

  handleInputChange(e) {
if (e.target.value) {
  e.preventDefault();

  var formDataArray = {
    code: [],
    desc: [],
    qty: [],
    prices: [],
    line_price: []
  };

  let update = function(value, pos, name) {
    switch (name) {
      case "description":
        formDataArray.desc[pos - 1] = value;

        break;
      case "code":
        formDataArray.code[pos - 1] = value;
        break;
      case "qty":
        formDataArray.qty[pos - 1] = value;
        break;
      case "price":
        formDataArray.prices[pos - 1] = value;
        break;
      case "line_price":
        formDataArray.line_price[pos - 1] = value;

        break;
      default:
    }
    return formDataArray;
  };

  var valuesTwo = e.target.name.split("-");

  var name = valuesTwo[1];
  var value = e.target.value;
  var pos = valuesTwo[0];

  //  update(value, pos, name);
  //  update(value, pos, name);
  this.setState({ formData: update(value, pos, name) });
}

}

更新功能的结果

{code: Array(0), desc: Array(1), qty: Array(0), prices: Array(0), line_price: Array(0)}
code
:
[]
desc
:
["test"]
line_price
:
[]
prices
:
[]
qty
:
[]
__proto__
:
Object

当我更改不同输入的值时

{code: Array(0), desc: Array(2), qty: Array(0), prices: Array(0), line_price: Array(0)}
code
:
[]
desc
:
(2) [empty, "another test"]
line_price
:
[]
prices
:
[]
qty
:
[]
__proto__
:
Object

它说空的部分我想保留以前的数据“test”

这是输入的生成方式;这是一个网格系统。有五个输入（将它们视为一行），当用户单击一个按钮生成另一行时（第2行），当单击另一个按钮时，将生成第3行。输入字段例如是（2描述）。我想将它保存为某种类型的数组网格以执行某些功能，例如在用户输入字段时添加整列，例如价格。

 triggerRows() {
        this.setState({
          invoiceRows: this.state.invoiceRows + 1,
          viewSubmitButton: true
        });
      }

  dynamicRows() {
    var items = [];
    for (var i = 1; i < this.state.invoiceRows; i++) {
      items.push(
        <div>
          <input
            onClick={this.triggerRows}
            type="text"
            name={i + "-code"}
            defaultValue="code"
            key={i}
            onChange={this.handleInputChange}
          />
          <input
            type="text"
            name={i + "-description"}
            defaultValue="description"
            onChange={this.handleInputChange}
          />
          <input
            type="text"
            name={i + "-qty"}
            defaultValue="qty"
            onChange={this.handleInputChange}
          />
          <input
            type="text"
            name={i + "-price"}
            defaultValue="price"
            onChange={this.handleInputChange}
          />
          <input
            type="text"
            name={i + "-line_price"}
            defaultValue="line Price"
            onChange={this.handleInputChange}
          />
          <br />
        </div>

Answer 1

这是你想要实现的目标吗？

var valuesTwo = e.target.name.split("-");

        var name = valuesTwo[1];
        var value = e.target.value;
        var pos = valuesTwo[0];

        //  update(value, pos, name);
        this.setState(state => ({
            formData: {...state.formData, ...update(value, pos, name)}
        }), () => console.log(this.state.formData));

Answer 2

setState作为async使用，以便在更新状态console.log置于状态callback函数内后查看控制台中的更改。

 this.setState({
     ...this.state,
     formData: update(value, pos, name)
 }, () => console.log(this.state.formData));

Answer 3

实际上，如果您将对象传递给setState，它将执行合并

因此this.setState({formData: update(value, pos, name)});只会更新formData属性

顺便说一句，setState 异步，console.log(this.state.formData);不会写入更新后的值，而是可以将回调传递给setState

this.setState(
    {formData: update(value, pos, name)},
    () => console.log(this.state.formData)
);

如何改变状态React

3 个答案: