反應防止切換多個模態

Question

我的應用程式有問題。 我已生成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>

我的項目視圖顯示名稱，年齡和強度。 在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中單擊另一個按鈕后，打開的模態將被關閉並且合適的將被打開，甚至更好。

現在發生的事情是我可以打開多個模態，並且一切都能正常工作，但是我想使一個模態顯示在頁面上。

我試圖使另一個函數closeModal在showModal函數中的this.setState（{isModalOpen：！this.state.isModalOpen}）之前將isModalOpen的狀態設置為false，但是它不起作用。

在這個應用程序中，我使用redux，如果redux可以幫助解決問題，我可以使用它。

可視化我想做什么

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

Answer 1

這是我重構您的代碼的方式：

• 將ItemView類組件降級為container / dump-comonenet。 請記住，您擁有的類組件越少越好。
• 單擊按鈕時，我將當前單擊的項目的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'));