如何正确修改输入值并同时修改数组值？

Question

我使用对象索引项作为值来呈现对象内部以及每个对象旁边的输入的值。当我尝试使用onChange道具时，既不能修改渲染值也不能修改输入值。如何更改数组中元素的状态？

我希望在更改输入值时修改Toto值

我的对象播放器如下：

    ---------------------------------------------------------------------------
    RuntimeError                              Traceback (most recent call last)
    <ipython-input-119-03637faee91a> in <module>()
          5         value = 0
          6 
    ----> 7 class Parent(GrandParent):
          8     _name_ = 'Parent'
          9     _parentName_ = super()._name_

    <ipython-input-119-03637faee91a> in Parent()
          7 class Parent(GrandParent):
          8     _name_ = 'Parent'
    ----> 9     _parentName_ = super()._name_
         10
         11 
         12     def __init__(self):

    RuntimeError: super(): no arguments

在这里，我尝试渲染表格：

[
  {
  "name": "Toto";
  },
  {
   "name": "Lolz",
  }
]

我想做的是：

在表AND输入的每个元素中（例如第一个Toto），我想在输入中以及表中连续修改此值。我似乎找不到正确的答案。

Answer 1

我在这里为您创建了一个codeandbox示例：

https://codesandbox.io/s/vnkoxop6z3

您需要将值存储在状态中，并且在修改每个项目时，您需要通过onChange回调知道新值是什么，以及该当前值的索引。

在这里，您可以通过将数组散布到新数组中来复制该数组，访问新数组中的特定索引项，并使用新值更新名称。

完成此操作后。 setState和新数组。

class Component extends React.Component {
  constructor() {
    super();
    this.state = {
      values: [
        {
          name: "Toto"
        },
        {
          name: "Lolz"
        }
      ]
    };
  }

  modifyItem(e, index) {
    const newValue = e.target.value;
    const values = [...this.state.values];
    values[index].name = newValue;

    this.setState({
      values
    });
  }

  render() {
    return this.state.values.map((value, index) => {
      return (
        <Fragment>
          <label>{value.name}</label>
          <input
            type="text"
            value={value.name}
            onChange={e => this.modifyItem(e, index)}
          />
        </Fragment>
      );
    });
  }
}