Question

我正在尝试渲染组件onClick，而我遇到的问题是我的onClick不仅在我单击的按钮中打开了每一行中的组件。它可能是任何索引问题。你能看看我的代码吗？谢谢！

 class ItemView extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isFormOpen: false,
      parentId: null,
    }
  }

  handleAddItem = (value) => {
    this.setState({
      parentId: value.parentId,
      isFormOpen: !this.state.isFormOpen,
    })
  }

  render() {
    return (
      <div className="ui relaxed divided list">
        {data.items.map((item, index) => {
          return (
            <div className="item" key={index}>
              <Button
                label={'Add Item'}
                onClick={() => this.handleAddItem({ parentId: item.parentId })}
              />
              {isFormOpen && (
                <AddItem parentId={parentId} />
              )}
            </div>
          )
        })}
      </div>
    )
  }
}

Answer 1

添加检查parentId是否等于item.parentId：

{isFormOpen && parentId === item.parentId && (
    <AddItem parentId={parentId} />
)}

Answer 2

你是对的。为此，您必须使用其他组件。在此组件中，因为您使用map呈现元素，因此它在每个时间或行中呈现它。这就是为什么当isFormOpen true为public TestWindow() { super.setSizeUndefined(); VerticalLayout vL = new VerticalLayout(); vL.setSizeFull(); super.setContent(vL); //vL.addComponent(buildHeader()); Panel workArea = new Panel(); workArea.setSizeFull(); workArea.setCaption("View"); vL.addComponent(workArea); vL.setExpandRatio(workArea, 1f); //vL.addComponent(buildFooter()); //----------------------------- VerticalLayout view = new VerticalLayout(); view.setSizeUndefined(); workArea.setContent(view); for (int i=0; i < 100; i++) { String s = "view line "+i; for (int j=0; j < 10; j++) { s += "____________________"+j; } Label line = new Label(s); line.setSizeUndefined(); view.addComponent(line); } //============================= /* VerticalLayout view = new VerticalLayout(); view.setSizeUndefined(); workArea.setContent(view); GridLayout gl = new GridLayout(); gl.setSizeUndefined(); view.addComponent(gl); view.setExpandRatio(gl, 1); gl.setColumns(2); for (int i=0; i < 100; i++) { Label line = new Label("view line "+i); line.setSizeUndefined(); gl.addComponent(line); } */ //------------------------------ center(); setModal(true); setDraggable(true); UI.getCurrent().addWindow(this);所以它在所有项目/行上都是真的时。

请使用其他组件呈现条件元素。

渲染组件.map onClick（） - React

2 个答案: