开发者问题收集

在 .map onClick() 中渲染组件 - React

2018-04-20
773

我尝试在 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>
    )
  }
}
2个回答

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

{isFormOpen && parentId === item.parentId && (
    <AddItem parentId={parentId} />
)}
Igor Alemasow
2018-04-20

你说得对。 为此,你必须使用其他组件。在这个组件中,因为你使用 map 来呈现元素,所以它会在每次或每行中呈现它。 这就是为什么 isFormOpentrue 时,它在所有项目/行上都为真。

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

M Shafique
2018-04-20