Question

我有一个可以翻转卡片的程序，您可以创建新卡片...共有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;

该按钮位于“ hr”下方的“ div”中。我尝试使用setState并显示“ none”，但是按钮仍然显示...

Answer 1

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

Answer 2

为什么不将函数绑定到事件上，而不仅仅是调用函数this.deleteCard()？

例如：

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

如果它不起作用，请尝试从构造函数初始化bind语句，并仅使用this.deleteCard事件中的onclick。

此外，这可能会帮助您：https://reactjs.org/docs/handling-events.html

Answer 3

第一种方法

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

第二种方法

style={{ display : this.state.showButton ? 'block' : 'none' }}

Answer 4

在他们进入CardVieweer之前，我通过用alert（）生成一条错误消息来解决了这个问题。...这是一个简单的解决方法，我想用一种更酷的方式来解决这个问题，但是现在我不会再为此烦恼了。

如果您想查看该应用，请转到http://www.daniel.hoifodt.com/cardcreator.html。

这不是我100％编写的，我从CS50课程中获得了一些代码并形成了一个github帐户。

Anywas，其余工作由be完成。还可以访问网站www.daniel.hoifodt.com，尽管它是挪威语的。就是这样。

如何隐藏按钮？

4 个答案: