反应防止切换多个模式

Question

我的 react 应用有问题。我已经生成了 100 个项目的列表。我使用地图功能显示列表中的每个元素

<ul className="list">
    {this.props.items.map((item) => {
      return (
        <ItemView
          key={item.id}
          id={item.id}
          name={item.name}
          strenght={item.strenght}
          age={item.age}
        />
      );
    })}
</ul>

我的项目视图显示名称、年龄和强度。 on mouseEnter 显示按钮，点击后在被点击的元素下显示模态。

class ItemView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isMouseInside: false,
      isModalOpen: false,
    };
  }

  mouseEnter = () => {
    this.setState({ isMouseInside: true });
  };

  mouseExit = () => {
    this.setState({ isMouseInside: false });
  };

  showModal = () => {
    this.setState({ isModalOpen: !this.state.isModalOpen });
  };

  closeModal = () => {
    this.setState({ isModalOpen: false });
  };

  render() {
    return (
      <li
        onMouseEnter={this.mouseEnter}
        onMouseMove={this.mouseEnter}
        onMouseLeave={this.mouseExit}
      >
        <div className="item__row">
           <h5>{this.props.name}</h5>
           <h6>Age: {this.props.age}</h6>
           <p>{this.props.strenght}/100</p>

          {this.state.isMouseInside ? (
            <button className="btn" onClick={() => this.showForm(false)}>
              Change data
            </button>
          ) : null}

        </div>
        {this.state.isModalOpen ? (
          <Modal
            onSubmit={this.handleSubmitForm}
          />
        ) : null}
      </li>
    );
  }
}

我想要做的是防止阻止打开两个模态的可能性，甚至更好的是，如果单击另一个 itemView 中的另一个按钮后，打开的模态将被关闭并且合适的会打开。

现在发生的事情是我可以打开多个模态并且everythink 工作，但我想让一个模态显示在页面上。

我尝试在 showModal 函数中的 this.setState({ isModalOpen: !this.state.isModalOpen }) 之前创建另一个函数 closeModal 将 isModalOpen 的状态设置为 false，但它不起作用。

在这个应用程序中，我使用 redux，如果 redux 可以帮助解决问题，我可以使用它。

Visualization what i want to do

CODEPEN 示例：https://codepen.io/dominik3246/pen/QqKzzp

Answer 1

我是这样重构你的代码的：

• 已将 ItemView 类组件降级为容器/转储组件。请记住，您拥有的类组件越少越好。
• 单击按钮时，我将当前单击的项目的ID存储在currentItemId中
• 然后我只显示状态currentItemId 与当前项目 ID 匹配

我已经尽力在重构中使用 React 的模式。事实上，我将 LOC 从 85 减少到 59，现在 IMO 的代码看起来更整洁了。

使用此代码作为参考，了解将来如何对您的 React 组件和容器进行编码，因为您的代码需要一些润色。

Codepen：https://codepen.io/metju/pen/LzRqJp

代码：

class List extends React.Component {
    constructor() {
        super()
        this.state = {
            currentItemId: undefined,
            data: [{id: 0, name: "item1", strenght: 5, age: 5}, {id: 1, name: "item2", strenght: 5, age: 5}, {
                id: 2,
                name: "item1",
                strenght: 5,
                age: 5
            }, {id: 3, name: "item1", strenght: 5, age: 5}, {id: 4, name: "item1", strenght: 5, age: 5}],
        };
        this.toggleModalFunc = this.toggleModalFunc.bind(this);
    }

    toggleModalFunc(id) {
        const currentItemId = id !== this.state.currentItemId ? id : undefined
        this.setState({ currentItemId })
    };

    render() {
        return (
            <ul className="list">
                {this.state.data.map((d) => {
                    return (
                        <ItemView
                            key={d.id}
                            name={d.name}
                            strenght={d.strenght}
                            age={d.age}
                        >
                            <button className="btn" itemId={d.id} onClick={() => this.toggleModalFunc(d.id)}>
                                Change data
                            </button>
                            {this.state.currentItemId === d.id ? <Modal /> : null}
                        </ItemView>
                    );
                })}
            </ul>
        );
    }
}
const Modal = () => (
    <div>
        THIS IS MODAL
    </div>
)
const ItemView = (props) => {
    return <li>
        <div className="item__row">
            <h5>{props.name}</h5>
            <h6>Age: {props.age}</h6>
            <p>{props.strenght}/100</p>
            {props.children[0]}
        </div>
        {props.children[1]}
    </li>
}

ReactDOM.render(<List />, document.getElementById('app'));