ReactJS

Question

我的目的是删除按钮，我刚刚点击了。我知道可能有很多方法，例如创建一个 deleteButton 组件，并适当地设置状态。

但是，我在主 App 组件中的 return 函数也会呈现另一个按钮（我可以做到），但我认为这可能会增加复杂性。

我目前正在努力寻找理想的解决方案，所以请帮忙。

Answer 1

好的，我已经设法解决了我的问题，尽管我确信还有其他方法。

进一步阐明...

单击 'Create' 按钮时，我有一个要呈现的表单。

同时，我希望删除 'Create' 按钮，一旦点击。

最终结果是只显示窗体并在return函数中嵌套一个新按钮。

1) 设置表单的初始状态为false:

this.state = {
  displayForm: false,
}

2) 然后在 displayForm 函数中使用 setState 以允许在单击按钮后更改状态：

displayForm(){
  this.setState({
    displayForm: !this.state.displayForm {/* true */}
  })
}

3) 在render函数内设置一个style对象，如：

render() {
  const btnStyle = {
    display: 'block',
  } ...

4) 如果表单已经渲染，使用IF语句改变按钮的显示样式

if(this.state.displayForm){
  btnStyle.display = 'none'
}

5) 现在，在 return 函数中，适当地使用您的 JSX 标签并调用函数 onClick，以及要应用的样式。

<Button
  style={btnStyle}
  onClick={() => {
    this.displayForm()
  }}>Create</button>
  {this.state.displayForm && ([
   <Form />,
   <br />,
   <Button>Add Schema</Button>,
  ])}

注意：

ReactJS - 如何删除刚刚单击的按钮组件？

ReactJS - How does one delete a button component, that was just clicked?

javascript

onclick

event-handling