Question

我正在使用打字稿制作前端应用程序并做出反应。我有一个组件A，除其他html元素外，还有一个文本框。我要在单击按钮时添加此组件A。因此，如果用户多次单击按钮，我希望每次单击都会创建一个新组件A。另外，我希望能够存储文本数据，以便以后可以提取它并对其进行处理。

我试图列出此组件，但它给了我一个错误。

interface State {
  componentList?: ComponentA[];
}

export class ComponentList extends React.Component<Props, State> {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  public onClick(event) {
    const componentList = this.state.componentList;
    this.setState({
      componentList: componentList.concat(<ComponentA key= 
         {componentList.length} />)
    });
  }

  public render() {
    return (
      <React.Fragment>
        <button onClick={this.onClick}>Add component</button>
              {this.state.componentList.map(function(component, index) 
              {
                  return ComponentA
              })}
      </React.Fragment>
    );
  }
}

Answer 1

将组件数量保持在以下状态：

constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.state = {
        numComponents: 0
    }
}

添加一个新函数，该函数创建组件数组以供以后呈现：

clickedComponents = () => {
    let componentArray = [];
    for (let i=0; i<this.state.numComponents; i++) {
        componentArrays.push(<ComponentA />);
    }
    return componentArray;
}

使用onClick函数增加组件数：

public onClick(event) {
    this.setState({numComponents: this.state.numComponents + 1});
}

渲染组件数组：

public render() {
    return (
        <React.Fragment>
            <button onClick={this.onClick}>Add component</button>
            {this.clickedComponents()}
        </React.Fragment>
    );
}

Answer 2

您可能要在代码中进行两项更改。首先在构造函数中初始化您的状态，

  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.state = { componentList: [] }
  }

以便反应可以跟踪该数据。

第二件事是，您在渲染功能中从地图返回了错误的项目。尝试返回component，这是每次单击按钮时按下的<ComponentA ../>的不同副本，

  public render() {
    return (
      <React.Fragment>
        <button onClick={this.onClick}>Add component</button>
              {this.state.componentList.map(function(component, index) 
              {
                  return component;
              })}
      </React.Fragment>
    );
  }

单击按钮添加组件

2 个答案: