时间戳

首页 > 解决方案 > 为多个下拉选择呈现标签

javascript - 为多个下拉选择呈现标签

问题描述

我有一个多重下拉选择，可让您选择食物，然后单击时可以在末尾添加文本值。我正在为 Dropdown 组件使用“semantic-UI-react”。我的问题是，当我将新值添加到嵌套对象时，标签消失了。我可以使用所需的值设置标签或嵌套对象，但是当我尝试一起做时，标签总是消失。图片供参考落下

下拉菜单 2

这是我以这种方式工作的代码：

const renderLabel = (item, i, { value }) => ({
    content: value,
    onClick: (e) => {
      const servingSize = prompt(value + ' serving size:');
      if (servingSize !== null) {
        value = item.text + ' ' + servingSize;
        e.target.firstChild.textContent = value;
      };
    }
  });

<Dropdown clearable id="breakfast-fruits1" renderLabel={renderLabel} search allowAdditions onAddItem={handleAddition} className="dropdown" placeholder="Fruits" fluid multiple selection options={fruits} onChange={handleChange} />

当我尝试设置状态时，最后一个标签消失了。

const renderLabel = (item, i, { value }) => ({
    content: value,
    onClick: (e) => {
      const servingSize = prompt(value + ' serving size:');
      if (servingSize !== null) {
        value = item.text + ' ' + servingSize;
        e.target.firstChild.textContent = value;
        setResult((prevResult) => {
          prevResult.monday.breakfast.fruits[i] = value;
          return prevResult;
        })
      };
    }
  });

关于如何使其工作或设置更好的任何想法？我尝试了许多不同的方法来呈现标签并更改状态/结果。让我知道我是否可以在问题中包含其他任何内容以使其更易于解决。

这是我的水果状态：

const [ fruits, setFruits ] = useState([
    { key: 'Apple', text: 'Apple', value: 'Apple' },
    { key: 'Apricot', text: 'Apricot', value: 'Apricot' },
    { key: 'Banana', text: 'Banana', value: 'Banana' },
    { key: 'Berries', text: 'Berries', value: 'Berries' },
    { key: 'Blackberries', text: 'Blackberries', value: 'Blackberries' },
    { key: 'Blueberries', text: 'Blueberries', value: 'Blueberries' },
    { key: 'Cantaloupe', text: 'Cantaloupe', value: 'Cantaloupe' },
    { key: 'Cherries', text: 'Cherries', value: 'Cherries' },
    { key: 'Grapefruit', text: 'Grapefruit', value: 'Grapefruit' },
    { key: 'Honeydew', text: 'Honeydew', value: 'Honeydew' },
    { key: 'Kiwi', text: 'Kiwi', value: 'Kiwi' },
    { key: 'Melon', text: 'Melon', value: 'Melon' },
    { key: 'Nectarine', text: 'Nectarine', value: 'Nectarine' },
    { key: 'Orange', text: 'Orange', value: 'Orange' },
    { key: 'Papaya', text: 'Papaya', value: 'Papaya' },
    { key: 'Peach', text: 'Peach', value: 'Peach' },
    { key: 'Pear', text: 'Pear', value: 'Pear' },
    { key: 'Pineapple', text: 'Pineapple', value: 'Pineapple' },
    { key: 'Plum', text: 'Plum', value: 'Plum' },
    { key: 'Raspberries', text: 'Raspberries', value: 'Raspberries' },
    { key: 'Strawberries', text: 'Strawberries', value: 'Strawberries' },
    { key: 'Tangerine', text: 'Tangerine', value: 'Tangerine' },
    { key: 'Watermelon', text: 'Watermelon', value: 'Watermelon' }
  ]);

这是我的 onChange 函数：

const handleChange = (e, { value }) => {
    const newData = update(result, {
      monday: {breakfast: {fruits: {$set: value}}}
    });
    setResult(newData);
  };

这是我的 handleAddition 函数：

const handleAddition = (e, data) => {
    console.log(data.value);
    setFruits((prevFruits) => {
      return [
        ...prevFruits,
        { text: data.value, key: data.value, value: data.value }
      ];
    });
  };

标签： javascriptreactjsreact-nativereact-hookssemantic-ui-react

解决方案

我建议将问题分解为 2 个单独的部分：renderLabel应该只渲染标签并返回 JSX 以显示在屏幕上，让我们定义一个处理状态更新的新函数。如果我们可以让状态更新功能正常，渲染标签可以处理更新新的视觉效果。

让我们开始。

这里的renderLabel函数应该只有一个目的，就是在 React 组件渲染和重新渲染时显示标签。

在您的代码片段 2 中，您似乎正在尝试使用 React HooksetResult来更改应用程序的状态。建议定义一个名为 eg 的单独函数onLabelClick，然后负责更新状态。

更新

我就这个问题写了一个 CodePen 并测试了你的代码的功能。You can take a look at My CodePen Dropdown Test It seems that when the option value is changed the text changes, too. 这些更改不会保存在选项对象中。

我没有解决问题，让我们看看 CodePen 是否有帮助。

关于状态管理

最后，代码片段 2 改变了 prevState 的状态，这是状态更新系统中的一种反模式。始终复制先前的状态并与新的子状态合并，例如使用

const newState = {...prevState, nameOfTheProperyToOverrideInPrevState: newValue};

这可以防止应用程序中的错误。一些流行的状态管理系统例如

  • 还原
  • 使用 Hooks 状态的功能组件
  • 不可变的.js

阅读它们是如何工作的有助于更深入地了解为什么状态更新会失败。

推荐阅读