如何从选择标签传递数组对象并将值传递给 API？

Posted 2023-04-14

【中文标题】如何从选择标签传递数组对象并将值传递给 API？

【英文标题】：How to pass array object from select tag and pass values into API?

【发布时间】：2020-03-27 01:18:51

【问题描述】：

我有两个组件。从组件A 我得到roles 字段的值，并使用这个值我需要为users 的组件B 创建另一条记录。

componentA的结构是这样的：

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

componentB 的结构是这样的，我在其中获取角色数据，当我创建另一条记录时，角色的值应该像这种格式一样插入。

[
  
    "id": "507f1f77bcf86cd799439017",
    "email": "[e-mail]",
    "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: "[e-mail]"
id: "507f1f77bcf86cd799439123"
role: []

如何管理roles 字段的<select> 标记，以便从选定的下拉值中插入的新记录应如下所示：

"id": "507f1f77bcf86cd799439017",
"email": "[e-mail]",
"roles": 
  "id": "507f1f77bcf86cd799439123",
  "title": "admin",
  "status": "active"

,

P.S 请使用这个有点长的代码。

【参考方案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>

【讨论】：

您能详细说明一下吗？

@aananddham 请查看我的新版本。希望它有助于描述我的想法的细节。

【参考方案2】：

由于您想通过从列表中选择一个选项来获取整个对象，您可以像这样将整个对象存储为<option> 的data-value，您可以将自定义对象替换为data-value

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

【讨论】：

嗨，很抱歉，回复太晚了...通过使用它，它会像这样返回 data-value="[object Object]" 代码：data-value=title:$name.title,id:$name.id@ 987654328@

【参考方案3】：

我认为你可以将你的类组件转换成函数式组件，并且使用钩子可以让你的生活变得轻松。 要使用上下文的值并更新值上下文，请查看此链接。 How to change Context value while using React Hook of useContext