Question

尝试做一些反应，在一周中有几天选择选项的地方。

例如，在星期一选择一个选项时，我希望它不包含在星期二和星期三的列表中。

快速的视觉模型可帮助实现可视化。 https://i.imgur.com/3KhHAyn.png

到目前为止，一直想创建一个名为“ available”的新状态数组，然后对select进行一次onchange的功能，将其从数组中删除，并将状态更新为此。

虽然可行，但也会将其从所选的列表中删除...

// function to remove from the list and update state

removeFromList = event => {
    let updatedList = this.state.availableMeals;
    console.log(event.target.value);
    updatedList = updatedList.filter(function(item) {
      return (
        item.fields.Name.toLowerCase().search(
          event.target.value.toLowerCase()
        ) === -1
      );
    });
    this.setState({ availableMeals: updatedList });

// from inside the component

<select onChange={this.props.removeFromList}>
            <option>select an option…</option>
            {this.props.meals.map(meal => (
              <option key={meal.id}>{meal.fields.Name}</option>
            ))}
          </select>

关于如何处理此类问题的任何想法？

我每天都在考虑存储和选择的选项进行陈述的想法，然后在做出选择后引用它吗？

Answer 1

最好不要在状态中从列表中删除一个选项，而是在渲染它们时过滤您的选项：

带有下拉菜单的子组件：

class DropDown extends React.Component {
    onSelect = event => {
        this.props.selectItem(this.props.name, event.target.value);
    };

    render() {
        return (
            <select onChange={this.onSelect}>
                <option>select an option…</option>
                {this.props.meals.map(meal => (
                    <option key={meal.id} value={meal.id}>{meal.value}</option>
                ))}
            </select>
        );
    }
}

父项：

class ParentComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            selectedItems: {}
        };
    }

    getFilteredMeals(name) {
        const removedItems = { ...this.state.selectedItems };
        delete removedItems[name];
        const removedItemsList = Object.values(removedItems);
        return this.props.meals.filter(item => {
            return !removedItemsList.includes(item.id);
        });
    }

    getValue(name) {
        return this.state.selectedItems[name];
    }

    selectItem = (name, value) => {
        this.setState({
            selectedItems: {
                ...this.state.selectedItems,
                [name]: value
            }
        });
    };

    render() {
        return (
            <div>
                <DropDown
                    name="monday"
                    selectItem={this.selectItem}
                    meals={this.getFilteredMeals("monday")}
                    value={this.getValue("monday")}
                />
                <DropDown
                    name="tuesday"
                    selectItem={this.selectItem}
                    meals={this.getFilteredMeals("tuesday")}
                    value={this.getValue("tuesday")}
                />
                <DropDown
                    name="wednesday"
                    selectItem={this.selectItem}
                    meals={this.getFilteredMeals("wednesday")}
                    value={this.getValue("wednesday")}
                />
            </div>
        );
    }
}

我为您创建了一个有效的示例： https://codesandbox.io/embed/gallant-murdock-vsibi

Answer 2

这可能有点令人惊讶……有趣

您已过滤列表this.state.availableMeals-可能是从this.props.meals ...

初始化的

那为什么不使用它进行渲染呢？

{this.state.availableMeals.map(meal => (
  <option key={meal.id}>{meal.fields.Name}</option>
))}

保持过滤列表的性能更高-无需在render期间重新计算。

从选择中删除选项

2 个答案: