Question

我的应用程序中有一部分我希望用户能够邀请其他用户加入该应用程序，具体取决于他们的定价计划，他们可以发送更改的邀请数量。

我希望有一个“邀请另一个”按钮，当单击该按钮时，会在当前屏幕上添加另一个InviteForm组件，但是我想阻止用户邀请用户达到他们的付款计划阈值吗？

这可能吗？

这是我的尝试，

class InviteWizard extends Component {

    constructor() {
        super();
        this.state = {
            invites: [],
            threshold: 5,
            filled: 1
        }
    }

    handleAddInvite = () => {
        // if (this.state.invites.length <= this.state.threshold) {
        //     this.state.invites.push(<InviteForm addInvite={this.handleAddInvite} />);
        // }
    }

    componentDidMount() {
        this.state.invites.push(<InviteForm addInvite={this.handleAddInvite} />);
    }

    render() {

        return (
            <div className="InviteWizard">
                {this.state.invites}
            </div>
        )
    }

}

该阈值目前为当前硬编码。

Answer 1

首先，您仍然必须检查此服务器端，因为可以在客户端手动更改所有内容。

我建议您不要使用状态来存储JSX元素，而应将状态中的信息保持在最低限度，例如，用户要发送多少邀请（即他单击了“邀请”多少次）另一个” +1）。然后在您的render中，读取该值以生成一定数量的InviteForm。

您检查“邀请其他人”按钮的事件处理程序中表单的数量是否未超过阈值。

Answer 2

您可以根据InviteForm状态动态添加invites。

考虑用户可以邀请 X 个朋友的情况，在这种情况下，您将毫无理由地保持具有 X 相似形式的状态。

请注意，filled === invites.length并决定添加新表单正在检查threshold - invites.length !== 0

使用挂钩：


// const threshold = 5;

function InviteWizard({ threshold }) { // threshold as props
  const [invites, setInvites] = useState(1);

  const handleAddInvite = () =>
    threshold - invites !== 0 && setInvites(invites + 1);

  return (
    <div>
      <button onClick={handleAddInvite}> Invite </button>
      {Array.from(Array(invites), () => (
        <InviteForm addInvite={handleAddInvite}/>
      ))}
    </div>
  );
}

此hooks example。

使用班级：

const threshold = 5;

class InviteWizard extends React.Component {
  constructor(props) {
    super(props);
    this.state = { invites: 1 };
  }

  handleAddInvite = () => {
    if (threshold - this.state.invites !== 0) {
      this.setState({
        invites: this.state.invites + 1
      });
    }
  };

  render() {
    return (
      <div>
        <button onClick={this.handleAddInvite}> Invite </button>
        {Array.from(
          Array(this.state.invites),
          () => (
            <InviteForm addInvite={this.handleAddInvite}/>
          )
        )}
      </div>
    );
  }
}

此Class example。

对于动态threshold，请使用props进行传递。

可重复使用的组件仅可重复使用一定次数

2 个答案:

使用挂钩：

使用班级：