Question

好，所以我试图在React中构建一个表单，在这里我可以在多个输入中输入值，然后提交并让值填充表中的指定单元格。我正在尝试使用“ onChange”来更新状态，但是当我输入值时，我的初始状态将被完全覆盖。

所以，如果我设置：

state = {
    Jan012019: {
      first: null,
      second: null
    }
  };

然后尝试通过使用以下命令在“ first”的输入中输入“ 3”来更新状态：

this.setState(
      {
        Jan012019: {
          [e.target.name]: e.target.value
        }
      },
      function() {
        console.log(this.state);
      }
    );

状态显示为：

Jan012019 {
    first: '3'
}

完全从状态中删除“第二”，如果我尝试然后再将值输入到“第二”输入中，则会从状态中删除“第一”。这里发生了什么？我看过其他示例和解决方案，并且可以肯定的是，我的代码完全像这里另一个问题的解决方案一样，但是仍然无法正常工作。完整代码如下。

import React from "react";

class InputForm extends React.Component {
  state = {
    Jan012019: {
      first: null,
      second: null
    }
  };

  updateTable = e => {
    this.setState(
      {
        Jan012019: {
          [e.target.name]: e.target.value
        }
      },
      function() {
        console.log(this.state);
      }
    );
  };
  onClick = e => {
    e.preventDefault();
    console.log(this.state);
  };

  render() {
    return (
      <form className="ui form" style={{ marginTop: "50px" }}>
        <div className="inline field">
          <label style={{ marginRight: "27px" }}>First Input</label>
          <input
            name="first"
            type="number"
            placeholder="Enter value"
            onChange={this.updateTable}
          />
        </div>
        <div className="inline field">
          <label>Second Input</label>
          <input
            name="second"
            type="number"
            placeholder="Enter value"
            onChange={this.updateTable}
          />
        </div>
        <button onClick={this.onClick}>Click</button>
      </form>
    );
  }
}

export default InputForm;

我还尝试将输入值设置为：

value={this.state.Jan012019.first}

看看是否有什么不同，但是没有。

Answer 1

那是因为您要在setState中重置整个Jan012019对象。

Jan012019: {
  [e.target.name]: e.target.value
}

您需要先传播原始的Jan012019对象，以保留其他字段

this.setState({ 
   Jan012019: { 
      ...this.state.Jan012019, [e.target.name]: e.target.value 
   }
})

在React中动态更新'state'会覆盖整个状态

1 个答案: