Question

我有一个表，可以从API中提取其值。它显示公司，办公室，客户和销售字段的多行。现在，我需要添加一种更新字段值的方法，例如，用户将更改公司的值，然后单击“提交”，这将通过API更新数据库中的值。

我在这里面临的第一个问题是如何跟踪事物的多种状态，以便在它们发生变化时更新它们并提交新值？

我有这个，但我认为它不会起作用？

 state = {[
        firm: null,
        office: null,
        salesCode: null,
        account: null
     ]}

Answer 1

我建议构建一个比较两个值的辅助函数。

compareData(currentData, newData) {
    if(currentData === 'undefined' || (newData && currentData !== newData)) {
        return newData;
    } else {
        return false;
    }
}

只要您在输入字段上使用的名称与状态中的键名相匹配，它就应该进行适当的比较，并且只有在状态更改时才进行更新。

假设您正在使用输入字段来收集数据，则代码将看起来像这样。请记住，您需要构建一个循环来处理多行。

<Input type="text" name="firm" onChange={this.handleInputChange} />

handleInputChange(el) {
  const name = el.currentTarget.name;
  const currentValue = this.state[name];
  const newValue = el.currentTarget.value;

  if(this.compareData(currentValue, newValue)) {
    this.setState({ [name]: newValue });
  }
}

如果您要发布更大的代码示例，我们将很乐意为您提供进一步的帮助。

Answer 2

这是在状态内部保存数组的方式，如果需要保存其他值，请按照以下步骤操作。感谢@Geeky

state = {
        tableInfo: [{firm:null,
                    office:null,
                    salesCode:null,
                    account:null}],
        newFirm: null,
        newOffice: null,
        newSalesCode: null,
        newAccount: null,
    }

在状态React中保存多个字段值

2 个答案: