问题

在父组件中调用此函数：

private addEmployeeForm() {
  return <AddEmployeeComp employees={this.state.employees} showForm={true} />;
}

然后在AddEmployeeComp组件中：

export class AddEmployeeComp extends React.Component<
  { employees: Employee[]; showForm: boolean },
  {
    showEmployeeForm: boolean;
  }
> {
  constructor(props: { employees: Employee[]; showForm: boolean }) {
    super(props);
    this.state = {
      showEmployeeForm: this.props.showForm,
    };
  }

  private handleClose() {
    this.setState({
      showEmployeeForm: false,
    });
  }

  public render() {
    return (
      <>
        {this.state.showEmployeeForm ? (
          <div className="popup-box">
            <div className="box">
              <span className="close-icon" onClick={() => this.handleClose()}>
                x
              </span>
              <div className="userNameDiv">
                <label className="labelUsername" htmlFor="username">
                  Username
                </label>
                <br />
                ...

为什么在关闭表单（AddEmployeeComp）后再次打开时showForm={true}不起作用，showForm 在第一次打开后总是设置为 false？如何从父组件再次将其更改为 true？

这个问题可能是由于在AddEmployeeComp组件的构造函数中，showForm 被用来初始化 showEmployeeForm 状态，一旦它被设置为 false，默认情况下就不再改变。

要从父组件更改 showForm 为 true，您可以使用以下方法：

在父组件中，您可以维护一个名为 showForm 的状态，以控制是否显示 AddEmployeeComp 组件。然后，您可以通过在父组件中更改 showForm 状态来控制子组件的显示或隐藏。

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showForm: false, // 控制是否显示 AddEmployeeComp
    };
  }

  private addEmployeeForm() {
    return (
      <AddEmployeeComp employees={this.state.employees} showForm={this.state.showForm} />
    );
  }

  // 其他代码...

  // 在某个事件处理函数或方法中设置 showForm 为 true，以显示 AddEmployeeComp
  private showAddEmployeeForm() {
    this.setState({ showForm: true });
  }

  // 在某个事件处理函数或方法中设置 showForm 为 false，以隐藏 AddEmployeeComp
  private hideAddEmployeeForm() {
    this.setState({ showForm: false });
  }

  // 其他代码...
}

这样，您可以在父组件中控制 showForm 的值，从而在需要时显示或隐藏 AddEmployeeComp。

 private addEmployeeForm() {
return <AddEmployeeComp employees={this.state.employees} showForm={true} />;


}

    export class AddEmployeeComp extends React.Component<
  { employees: Employee[]; showForm: boolean },
  {
    
    showEmployeeForm: boolean;
  }
> {
  
  constructor(props: { employees: Employee[]; showForm: boolean }) {
    super(props);
    this.state = {
      showEmployeeForm: this.props.showForm,
    };
  }




   private handleClose() {
    this.setState({
      showEmployeeForm: false,
    });
  }

  public render() {
    return (
      <>
        {this.state.showEmployeeForm ? (
          <div className="popup-box">
            <div className="box">
              <span className="close-icon" onClick={() => this.handleClose()}>
                x
              </span>
              <div className="userNameDiv">
                <label className="labelUsername" htmlFor="username">
                  Username
                </label>
                <br />
    ...

答案1

得分: 1

showForm 是 props，showEmployeeForm 是 state。showForm 只是初始化 showEmployeeForm。如果你希望父组件知道它的子组件的状态变化，你可能需要将状态提升。请参考 React 文档中的 sharing-state-between-components 和 lifting-state-up。