如何從選擇標簽傳遞數組對象並將值傳遞給 API？

Question

我有兩個組件。 從 componentA 我得到了roles字段的值，並使用這個值我需要為users componentB 創建另一個記錄。

componentA的結構是這樣的：

[
  {
    "id": "507f1f77bcf86cd799439011",
    "title": "admin",
    "status": "active"
  },
  ...
]

componentB 的結構是這樣的，我在其中獲取角色數據，當我創建另一個記錄時，應該像這種格式那樣插入角色的值。

[
  {
    "id": "507f1f77bcf86cd799439017",
    "email": "admin@admin.com",
    "roles": {
      "id": "507f1f77bcf86cd799439011",
      "title": "admin",
      "status": "active"
    }
  },
  ...
]

=> 用戶插入組件以插入記錄。

import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
import RolesField from "./Editor/Roles/Field";

class UserInsertRow extends React.Component {
  constructor(props) {
    super(props);
    this.roles = [];
    this.getRoles();
  }

  customRoleField = (
    column,
    attr,
    editorClass,
    ignoreEditable,
    defaultValue
  ) => (
    <RolesField
      roles={this.roles}
      ref={attr.ref}
      {...this.props}
      editorClass={editorClass}
      ignoreEditable={ignoreEditable}
    />
  );

  render() {
    return (
      <BootstrapTable
        ref="table"
        insertRow={true}
        deleteRow={true}
        pagination={true}
        data={this.props.data}
      >
        <TableHeaderColumn
          dataField="role"
          customInsertEditor={{ getElement: this.customRoleField }}
          customEditor={{
            getElement: this.roleEditor,
            customEditorParameters: { roles: this.roles }
          }}
        >
          Role
        </TableHeaderColumn>
      </BootstrapTable>
    );
  }
}

=> RolesField 組件

import { rolesContext } from "../../Context";
class RolesField extends React.Component {
  constructor(props) {
    super(props);
  }

  getFieldValue = () => rolesContext._currentValue.selectedRoles;

  render() {
    console.log(this.props.roles);
    return (
      <div className="form-group">
        <select
          className="form-control editor edit-select"
          onChange={this.selectRole}
        >
          {this.props.roles.map(name => (
            <option ref={name.id} key={name.id} value={JSON.stringify(role)}>
              {name.title}
            </option>
          ))}
        </select>
      </div>
    );
  }

  selectRole(e) {
    var options = e.target.options;
    var value = [];
    for (var i = 0, l = options.length; i < l; i++) {
        if (options[i].selected) {
            value.push(options[i].value);
        }
    }
    rolesContext._currentValue.selectedRoles = [];
    value.map(value => rolesContext._currentValue.selectedRoles.push(value));
}

export default RolesField;

我用來存儲數據的上下文 API。

import React from 'react';
export const roles = {selectedRoles: []};
export const rolesContext = React.createContext(roles);



email: "qqq@qqq.com"
id: "507f1f77bcf86cd799439123"
role: []

我如何管理roles字段的<select>標記，以便從選定的下拉值中插入的新記錄應該是這樣的：

{
"id": "507f1f77bcf86cd799439017",
"email": "qqqq@qqqq.com",
"roles": {
  "id": "507f1f77bcf86cd799439123",
  "title": "admin",
  "status": "active"
}
},

PS請裸露這個有點冗長的代碼。

Answer 1

您可以通過使用映射存儲 role_id -> role_data 對來突破它。 將 role_id 作為值分配給每個選項，並在 onChange 處理程序中獲取值。 使用此值，您將能夠找到確切的角色。 然后做你接下來需要的任何事情。

編輯：添加示例代碼

角色來自八個狀態/道具

const roles = [
  {id: 'id_1', name: 'Admin'},
  {id: 'id_2', name: 'Super Admin'}
]

onChange 處理程序

onChange = e => {
  const id = e.target.value
  const seletedRole = roles.find(role => role.id === id)
  this.setState({
    selectedRole
  })
}

渲染選擇和選項

<select value={this.state.selectedRole.id} onChange={this.onChange}>
  {
    roles.map(role => <option id={role.id} value={role.id}>{role.name}</option>)
   }
</select>

Answer 2

由於您想通過從列表中選擇一個選項來獲取整個對象，您可以像這樣將整個對象存儲為<option> data-value ，您可以將自定義對象替換為data-value

<option data-value='{"name":"abc","status":"active"}'>a</option>

Answer 3

我認為您可以將您的類組件轉換為功能組件，並使用鈎子可以讓您的生活變得輕松。 要使用上下文的值並更新值上下文，請查看此鏈接。 如何在使用 useContext 的 React Hook 時更改 Context 值