reactjs onChange选择标记react js

btxsgosb 于 2022-12-03 发布在 React

关注(0)|答案(2)|浏览(174)

如何在下拉选择标签中选择值，请帮助实现如下。
这是我的代码

<div>
          <SelectField
            label={"Select Job Category"}
            onChange={(e) => {
              console.log(e.target);
            }}
            value={listJobCategories}
            data={listJobCategories?.map((v) => (
              <option
                key={v.id}
                value={v}
                onChange={(e) => {
                  console.log(v);
                  console.log(e);
                }}
              >
                {v?.attributes?.Name}
              </option>
            ))}
          />

          {listCategories && (
            <div className="flex flex-row flex-1 space-x-2 mt-4 mb-6">
              {listCategories?.map((v) => (
                <Badge
                  title={v?.id}
                  className="text-white p-2"
                  key={v?.id}
                  isDeleteOn={true}
                  onClickDelete={() => {
                    console.log(v?.id);
                    // setListCategoriesId((prev) =>
                    //   prev.filter((el) => el != v?.id)
                    // );
                    // setListCategories((prev) =>
                    //   prev.filter(
                    //     (el) => el?.attributes?.Name != v?.attributes?.Name
                    //   )
                    // );
                  }}
                />
              ))}
            </div>

listJobCategories是api中的useState，数据结构如下所示：

{
            "id": 2,
            "attributes": {
                "Name": "Accounting & Finance",
                "createdAt": "2022-09-08T04:40:53.307Z",
                "updatedAt": "2022-11-21T14:48:49.994Z",
                "publishedAt": "2022-09-08T04:40:54.154Z",
                "Type": null
            }
        },
        {
            "id": 3,
            "attributes": {
                "Name": "Corporate Affairs & Legal",
                "createdAt": "2022-09-08T04:41:25.968Z",
                "updatedAt": "2022-11-21T14:51:53.205Z",
                "publishedAt": "2022-09-08T04:41:26.822Z",
                "Type": null
            }
        }
}

这是UI的外观

我期望达到如下目标

I have console log e.target, result as below

reactjs

来源：https://stackoverflow.com/questions/74653316/onchange-select-tag-react-js

2条答案

按热度按时间

djmepvbi1#

您可以使用e?.currentTarget.value访问包含所选值的选择值！

赞(0）回复(0）举报 2022-12-03

rseugnpd2#

碱性溶液

将所选类别存储在新列表中
通过选定列表Map
删除标记应从选定列表中删除

// store selected categories
const [selectedCategories, setSelectedCategories] = useState([]);

 <div>
        <SelectField
          label={"Select Job Category"}
          onChange={(e) => {
            console.log(e.target);
            // Does this get id of single selection option or multiple
            // assuming single select mode
            const selectedId = // e.target.value ??
            const isAlreadySelected = selectedCategories?.find(i => i.id === selectedId)
            if (isAlreadySelected) {
                // do you want to remove if selected again
                // if yes remove from selected item and return
            } else {
                // add an entry { key, label } 
                const itemFromList = listJobCategories.find(i => i.id === selectedId)
                setSelectedCategories(items => ({ ...items, { id: selectedItemId, label: itemFromList.attributes.name }})
            }
          }}
          value={listJobCategories}
          data={listJobCategories?.map((v) => (
            <option
              key={v.id}
              value={v.id}
            >
              {v?.attributes?.Name}
            </option>
          ))}
        />
        // loop through selected options
        {!!selectedCategories?.length && (
          <div className="flex flex-row flex-1 space-x-2 mt-4 mb-6">
            {selectedCategories?.map((v) => (
              <Badge
                title={v?.id}
                className="text-white p-2"
                key={v?.id}
                isDeleteOn={true}
                onClickDelete={() => {
                  console.log(v?.id);
                  // delete from selected items, not the options of select
                  setSelectedCategories(prev => prev.filter(el => e.id !== v.id))

                }}
              />
            ))}
          </div>

希望这对你有所帮助，如果你想要确切的解决方案，请创建一些最小的可复制的例子

赞(0）回复(0）举报 2022-12-03

我来回答

reactjs onChange选择标记react js

2条答案

相关问题

热门标签

最新问答