NodeJS 如何在reactjs中通过select传递多个值

lg40wkob  于 2022-11-22  发布在  Node.js
关注(0)|答案(6)|浏览(163)

当我选择选项时,我需要使用onChange传递多个值,但我不能选择单个选项。它选择整个对象。下面是我的代码。

const test = [{id:1, name:'test, value:{x:10}}]

  <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children" >
    {test.map(item =>(
    <Option value={item.id, item.value}>{item.name}</Option>

))}   
  </Select>

是否有解决此问题替代解决方案

lnxxn5zx

lnxxn5zx1#

请使用自定义选择而不是选择。在“eventKey”中添加多个值,然后在选择处理程序中找到该值数组。

import { ButtonToolbar,DropdownButton,MenuItem } from "react-bootstrap";



<ButtonToolbar className="snap-fitness-wrapper">
    <DropdownButton
        title={this.state.selectedFacilityName}
        onSelect={this.onSelectFacility}
        id="snap" >
    {
        this.state.facilities.map(facility => (
        <MenuItem
            key={facility.facilityId}
            eventKey={[facility.facilityId, facility.name]}
            value={facility.facilityId}
        > {facility.name} - {facility.facilityId}{" "}
        </MenuItem>
        ))
    }
    </DropdownButton>
</ButtonToolbar>
h7appiyu

h7appiyu2#

您可以尝试以下代码。

const test = [{id:1, name:'test, value:{x:10}}]

<Select
multiple
showSearch
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children" >
{test.map(item =>(
<Option value={item.id, item.value}>{item.name}</Option>
))}   
</Select>
8zzbczxx

8zzbczxx3#

如果您使用react-select,则可以添加isMulti常见属性,以便为您的选项启用多个选择,请参阅:https://react-select.com/props
顺便说一句,react-select默认使用值标签匹配,您必须为您的案例重新Map

const options = [
  { id: 1, name: 'test1', value:{x:10} },
  { id: 2, name: 'test2', value:{x:20} },
]  

<Select
    ... // other code
    isMulti
    getOptionValue={option => option.value.x}
/>

支持多选,示例链接:sandbox

kcrjzv8t

kcrjzv8t4#

我假设您正在使用antd for select,并希望获取selecthandleChange内部的对象属性。
一个简单的方法是发送id或其他参数,并通过它获取对象。

import React from "react";
import ReactDOM from "react-dom";
import { Select } from "antd";

import "./styles.css";

const { Option } = Select;
const test = [
  { id: 1, name: "test1", value: { x: 10 } },
  { id: 2, name: "test2", value: { x: 11 } },
  { id: 3, name: "test3", value: { x: 12 } }
];

class App extends React.Component {
  handleChange = id => {
    const clickedOption = test.find(item => item.id === id);
    const value = `${clickedOption.id}, ${clickedOption.value.x}`;
    console.log(value);
  };
  render() {
    return (
      <div className="App">
        <Select
          onChange={this.handleChange}
          style={{ width: 200 }}
          placeholder="Select a person"
          optionFilterProp="children"
        >
          {test.map((item, index) => (
            <Option value={item.id} key={index}>
              {item.name}
            </Option>
          ))}
        </Select>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

希望这对你有帮助!

dauxcl2d

dauxcl2d5#

这样 做 的 简单 方法 如下 :

let options = test.map(item => {
  return <option value={item.value} onClick={(item) => this.yourhandlerfunction(item)}>item.name</option>
})
render(){
  return(
    <Select>
      {options}
    </Select>
  )
}

中 的 每 一 个
希望 这 对 你 有 帮助 !

gajydyqb

gajydyqb6#

您只需在onChange=((e) => this.handleChange(e, item.value)属性中传递第二个变量

const handleChange = (event, itemValue) => {
    console.log(`id: ${event.target.value}, value: ${itemValue}`)
}

const test = [{id:1, name:'test', value:{x:10}}]

<Select
    multiple
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={(e) => this.handleChange(e, item.value)}
>
    {test.map((item) =>(
        <Option key={key} value={item.id}>{item.name}</Option>
    ))}   
</Select>

相关问题