Javascript 如何隐藏按钮？

我有一个翻转卡片的程序，你可以创建新的。。。有3个组件。应用程序、CardEditor和CardViewer。在CardEditor中，我想创建一个函数，在键入数据之前隐藏进入CardViewer的按钮。数据以状态存储在App.js中，并作为道具发送到CardEditor.js。代码如下：

import React, { Component } from 'react';
import './CardEditor.css';



class CardEditor extends Component {
    constructor (props) {
        super(props);
        this.state = {
            front: "",
            back: "",
            showButton : false
        }
    }

    handleChange = (event) => {
        this.setState({
            [event.target.name] : event.target.value
        })
    }
    addCard = () => {
        this.props.addCard(this.state.front, this.state.back);
        this.setState({
            front : "",
            back: ""
        });
    }
    deleteCard = (event) => {
        this.props.deleteCard(event.target.dataset.index);
    }
    showButton = (event) => {
        let showButton = event.target.value;
        this.setState({showButton});
    }

  render() {

    const row = this.props.cards.map((card, index) => {
        return (
            <tr key={index}>
                <td>{card.front}</td>
                <td>{card.back}</td>
                <td><button data-index={index} onClick={this.deleteCard}>Delete</button></td>
            </tr>
        );
    })



    return (
      <div>
        <h2>Card Editor</h2>
        <table>
            <thead>
                <tr>
                    <th>Front</th>
                    <th>Back</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                {row}
            </tbody>
       </table>
       <br />
       <input onChange={this.handleChange} name="front" placeholder="front of card" value={this.state.front}/>
       <input onChange={this.handleChange} name="back" placeholder="back of card" value={this.state.back}/>
       <button onClick={this.addCard}>Add card</button>
        <hr />
        <div style={{display : this.state.showButton === "" ?'none' : 'block'}}>
            <button onClick={this.props.switchMode}>Go to viewer</button>
        </div>
      </div>
    );
  }
}

export default CardEditor;

import React，{Component}来自'React'；
导入“/CardEditor.css”；
类CardEditor扩展组件{
建造师（道具）{
超级（道具）；
此.state={
正面：“，
背面：“，
showButton:false
}
}
handleChange=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value
})
}
addCard=（）=>{
this.props.addCard（this.state.front，this.state.back）；
这是我的国家({
正面：“，
背面：“
});
}
deleteCard=（事件）=>{
this.props.deleteCard（event.target.dataset.index）；
}
showButton=（事件）=>{
让showButton=event.target.value；
this.setState（{showButton}）；
}
render（）{
const row=this.props.cards.map（（卡片，索引）=>{
返回(
{card.front}
{card.back}
删除
);
})
返回(
卡片编辑器
正面
返回
删除
{row}


添加卡

转到查看器
);
}
}
导出默认卡片编辑器；

按钮位于“hr”下方的“div”中。我尝试设置状态并显示“无”，但按钮仍显示…

 <div style={{display : this.state.showButton === false ? 'none' : 'block'}}>
        <button onClick={() => {
             this.setState({showButton: false}) 
             this.props.switchMode()
         }}>Go to viewer</button>
 </div>

{
this.setState（{showButton:false}）
this.props.switchMode（）
}}>转到查看器

与其只调用函数

this.deleteCard（）

，不如将函数绑定到事件

例如：

onClick={this.deleteCard.bind(this)}

如果它不起作用，请尝试从构造函数初始化bind语句，只需从

onclick

事件中使用

this.deleteCard

此外，这可能对您有所帮助：

• 第一种方法

  this.state.showButton &&
  <div>
  <button onClick={this.props.switchMode}>Go to viewer</button>
  </div>
  

  this.state.showButton&&
  转到查看器
  

• 第二种方法
  style={{ display : this.state.showButton ? 'block' : 'none' }} style={{display:this.state.showButton？'block'：'none'}

---

在他们进入CardVieweer之前，我用alert（）发出了一条错误消息，解决了这个问题。。。。这是一个简单的解决办法，我喜欢用更酷的方式来做，但我现在不想麻烦了

如果要查看应用程序，请转到

它不是100%由我写的，我从cs50课程中获得了一些代码，并建立了一个github帐户

---

不管怎样，其余的都是由be完成的。也可以访问网站www.daniel.hoifodt.com，尽管它是挪威语的。正如您所知。

删除功能正常工作。当您使用箭头函数时，您不必绑定到该函数。很好。这意味着这个问题已经解决了？如果您有任何问题，请随时提问。请投票选出最佳答案，如果没有，您可以发布正确答案。：）已经解决了。：）谢谢你对我感兴趣。但是我做得对吗。。。我真的很想用道具更新它，这样它就可以显示新状态是否为空。对于显示和隐藏，我提到的两个代码都可以工作。我不明白你说的带道具的更新按钮是什么意思。请详细说明我使用了第二种方法，但重点是如果数组this.props.cards为空，我想显示“无”，否则我想显示“阻止”。this.props.cards的形式是cards=this.state.cards in app.js您可以看到整个代码@