javascript - 基于复选框将输入框值添加到现有对象

Question

我有一个通过 API 调用呈现的数据表。它显示初始对象的 4 个值。我主要关心 name 值，因为这在稍后的发布请求中很重要。

表格中的每一行都有一个复选框。当复选框被选中 (true) 时，与该复选框关联的名称将作为对象添加到名为 selectedFields 的对象中。例如，如果我选择名称为 id 的复选框，它会创建一个对象存储，例如:

  "selectedFields": {
    "id" : {}
  }

这很好用。但是，我添加了 3 个与每个 name 关联的输入框。输入是 lengthType、size、maxArrayElements，这些当然是用户可选择的。我遇到的问题是将这些值添加回对象，因此它看起来像:

  "selectedFields": {
    "id": {
       lengthType: Variable,
       size: 1,
       maxArrayElements: 1
    },
    "price": {
       lengthType: Fixed,
       size: 10,
       maxArrayElements: 1
    }
  }

如何将这 3 个值添加回创建的 name 对象，使其看起来像上面的示例？

我不想发布一大堆代码，所以我发布了复选框函数，该函数处理创建具有适当的选定名称 的selectedFields 对象。我怀疑应该以某种方式在此处添加输入值，但我不确定。

 checkbox = ({ name, isChecked }) => {
//handle check box of each fieldName
const obj = this.state.fieldNames.find(field => field.name === name);
if (isChecked === true) {
  //checked conditional
  this.setState(
    {
      selectedFields: {
        ...this.state.selectedFields,
        [name]: {
          ...obj
        }
      }
    },
    () => {
      console.log(
        "callback in  isChecked if conditional",
        this.state.selectedFields
      );
    }
  );
} else {
  const newSelectedFields = this.state.selectedFields;
  delete newSelectedFields[name];
  this.setState(
    {
      selectedFields: newSelectedFields
    },
    () => {
      console.log(
        `box unchecked, deleted from object --->`,
        this.state.selectedFields
      );
    }
  );
}

};

您必须进行第一个下拉选择才能查看数据。

CodeSandbox link here

Answer 1

回答

您需要更改一些内容，因为没有任何内容说明在根状态对象之外分配新状态的位置。

---

Index.js 中的处理程序:

更改事件的处理程序不会查找对象的名称来确定它是否存在。如果您想将它添加到指定的子对象，您最好确保它在那里。

如果特定对象存在，我们调整处理程序以获取对象名称和带有 object.assign 的 setState:

注意:由于lengthType 没有name 属性，我们只需为其提供一个字符串。 e.currentTarget 将提供选项跨度，而不是根 Dropdown 元素，因此即使向该组件提供 name 属性也不允许我们使用 e.currentTarget.name - 您可能需要查阅 Semantic UI documentation如果你喜欢不同的东西。我快速浏览了一下，但不想深入研究。

  handleChange = (e, obj_name) => {
    if (this.state.selectedFields[obj_name]) {
      let selectedFields = Object.assign({}, this.state.selectedFields);
      selectedFields[obj_name] = Object.assign(
        this.state.selectedFields[obj_name],
        { [e.target.name]: e.target.value }
      );
      this.setState({ selectedFields });
    }
  };

  onLengthTypeChange = (e, obj_name) => {
    if (this.state.selectedFields[obj_name]) {
      let selectedFields = Object.assign({}, this.state.selectedFields);
      selectedFields[obj_name] = Object.assign(
        this.state.selectedFields[obj_name],
        { lengthType: e.currentTarget.textContent }
      );
      this.setState({ selectedFields });
    }
  };

当然，如果您不调整组件上的 onChange 事件，那么除了您的事件对象之外，它们还发送您的对象名称，上述方法将不起作用。

---

组件文件中的处理程序:

注意:这很奇怪，因为在您的 Index.js 文件中，您似乎使用 lengthType 做了一半，但您没有通过在额外的数据。您不能简单地将参数传递给处理程序 - 要使其工作，您需要将匿名函数传递给 onChange 属性，该属性将接收事件并将其传递给处理函数 使用您的对象名称:

      <Table.Cell>
        <Dropdown
          placeholder="Pick a length Type:"
          clearable
          selection
          search
          fluid
          noResultsMessage="Please search again"
          label="lengthType"
          multiple={false}
          options={lengthTypeOptions}
          header="Choose a Length Type"
          onChange={e => onLengthTypeChange(e, name)}
          value={lengthType}
          required
        />
      </Table.Cell>
      <Table.Cell>
        <Input
          onChange={e => handleChange(e, name)}
          value={this.state.size}
          type="number"
          name="size"
          min="1"
          placeholder="1"
          required
        />
      </Table.Cell>
      <Table.Cell>
        <Input
          onChange={e => handleChange(e, name)}
          value={this.state.maxArrayElements}
          type="number"
          name="maxArrayElements"
          placeholder="1"
          min="1"
          max="100"
          required
        />
      </Table.Cell>

一旦这些东西被调整，代码将在相应的复选框被选中后更新子对象的指定属性。

---

最后说明:

如果您取消选中然后选中该框，我没有调整它以保存以前的状态。您的问题中没有具体说明，我不想做出假设。

---

代码沙盒:

调整后的代码沙箱:https://codesandbox.io/s/createqueryschema-table-rewrite-bwvo4?fontsize=14

---

其他建议:

• 在您的初始状态下，您的 selectedFields 被声明为一个 Array，然后它会在任何复选框出现时立即变成一个 Object被选中。我建议不要这样做。 在运行应用程序的过程中更改属性的数据类型非常麻烦。

• 加载复选框时，您可以从 Index.js 文件中提供一个 checkbox 函数。这在您的组件中简称为 box。我建议在从父级传递给子级时保持属性和状态的名称相同。其他人在必要时介入和维持要容易得多，更不用说保持自己的理智更容易了。

• 上面的 checkbox 函数从子项中获取 props 并将它们传递给父项。这是将收集的数据传递到父级缓存、本地/ session 存储或任何您想对数据执行的操作的地方。您可以编写代码来实现以下效果:如果在调用输入处理程序时选中了复选框，执行 保存 - 但我会说它可能最好在 render 因为无论如何屏幕​​都在不断更新，而且你现在有 checkbox 功能可以随时传递 Prop 。 这是偏好，所以由您决定

---

祝你好运!希望这对您有所帮助!