使模态出现 OnClick

Question

我正在努力让模态出现 onClick()。我在一个组件中有一个功能，可以在单击 Add Player 时将玩家添加到现有列表中。该按钮在 renderAddButton() 函数中单独呈现，该函数将 onAddButtonClick() 作为道具传递。

我希望用户能够在将玩家姓名添加到列表之前在模态内的表单中输入玩家姓名，现在代码输出 Player + index作为玩家的名字。

    function onAddButtonClick() {
        setItems((prev) => {

            const newItems = [...prev];

            newItems.push({
                name: `Player ${newItems.length + 1}`,
                teamId: currentTeam[0].teamId
            });

            playersStore.push({
                name: `Player ${newItems.length + 1}`,
                teamId: currentTeam[0].teamId
            });

            return newItems;
        });
    }

我有这种形式，我想在模态中表示：

export const PlayerForm = () => {
    return (
        <div>
            <form>
                <input type='string' id='playerId' name='playerName' defaultValue='0' />
                <input
                    type='number'
                    id='playerGoals'
                    name='totalGoals'
                    defaultValue='0'
                    min='1'
                    max='5'
                />
                <input
                    type='number'
                    id='playerGoals'
                    name='playerGoalPercentage'
                    defaultValue='0'
                    min='1'
                    max='5'
                />
            </form>
        </div>
    );
};

如何从内部触发模式 onAddButtonClick()？

Answer 1

我使用 react-bootstrap framework.

实现模式

从我想要显示模态的组件中，我将创建一个处理程序，该处理程序将根据我在 state 中设置的 bool show 模态来控制组件的能力。通常从 parent 组件来看，这个显示处理程序看起来像这样：

setShow = () => {
  this.setState({ show: !this.state.show });
};

如示例中所示，它处理一个名为 show 的 state 属性，它决定模态框是否显示在应用程序中。

下面是模态的实现，我将用作父组件的子组件，它所在的位置以及我将传递我称为 show 的 state 属性的位置true或false是否显示模态：

<ExampleModal
  show={this.state.show}
  setShow={this.setShow}
  activeRecord={this.state.activeRecord}
  activePrimaryAccountId={this.state.activePrimaryAccountId}
  userAccessRole={this.props.userAccessRole}
/>

我将模态需要显示为 props 的必要详细信息传递给父组件的 state 属性。最重要的是 show 属性包含 setShow 函数，我在子组件（模态本身）中使用该函数更新父组件中的 state 以在时间关闭模态也来了

在 ExampleModal 组件中，我首先声明 state，并使用已从 props 加载的以下属性：

this.state = {
  show: this.props.show,
  ...

}

然后我使用一个处理程序，该处理程序利用 setShow 函数传递给 props 中的子组件，如下所示：

handleClose = () => this.props.setShow(false);

在模态组件中，有一个按钮在其 onClick() 合成事件中使用此处理程序来触发模态呈现给浏览器后的关闭。

相反，在父组件中，您的按钮将使用 onClick() 合成事件来触发一个调用，该调用将在按钮中实现如下内容以打开模式：

onClick={this.setShow(true)}

我在 React.js 的所有模态中重复使用该过程，希望对您有所帮助。这里的技巧是有效地使用 componentDidUpdate() 或 useEffect()（如果你使用 React Hooks）来确保你在父组件的 state 中加载了正确的数据，这样你就可以通过它在适当的时候进入子组件的道具。我给你的 <ExampleModal /> 应该给你足够的线索了。

使模态出现 OnClick

Making a Modal Appear OnClick

javascript

bootstrap-modal

reactjs

bootstrap-4