Question

好的，我的Hangman游戏中的字母按钮代码效果很好，单击时，它会显示在猜测字母部分的页面上如果字母正确，则将其附加到并在正确的位置替换下划线（_ _ _ _）我的问题是：我怎样才能重构我的handleClick（事件）以某种方式，当单击按钮时按钮消失（所以可能通过添加一个类，设置display：none）

 export class Input extends Component {

      handleClick = (event) => {
        if (this.props.guesses.includes(event.target.value)) {
          return this.event.value
        } else {
          return this.props.makeGuess(event.target.value.toLowerCase())
        }
      }
      render() {
        const alphabet = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];

        return (<div className="containerAlph">
          {alphabet.map((letter, index) => <button className="AlphaBet" key={index} onClick={this.handleClick} value={letter}>{letter}</button>)}
        </div>);
      }

    }

Answer 1

有很多方法可以做到这一点。

我将使用状态来代替添加CSS类。基本上，您将跟踪alphabet数组中可用的按钮。每次我们点击一个按钮，我们都会从数组中删除该字母并重新渲染该组件。

首先，我会将您的alphabet数组更改为州属性。这样每次更新时，它都会被重新渲染，按钮也会相应消失。

首先更改，在渲染函数中让我们将const { alphabet } = this.state更改为来自州：

constructor (props) {
    super(props)
    this.state = {
      alphabet : [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ']
    }
  }

我在组件的构造函数中声明了这个：

handleClick

现在......让我们处理alphabet功能。我们想要传递我们点击的字母，并从handleClick数组中删除该字母。在渲染按钮时的return语句中，请确保在return (<div className="containerAlph"> {alphabet.map((letter, index) => <button className="AlphaBet" key={index} onClick={() => this.handleClick(letter)} value={letter}>{letter}</button>)} </div>);函数中传入要删除的字母。

this.setState

现在为功能本身：抓取字母表状态的值，并删除您从该状态单击的字母。

handleClick(letter) { const alphabet = [...this.state.alphabet] // remove the letter from the state const index = alphabet.indexOf(letter) if (index > -1) { alphabet.splice(index, 1); } this.setState({ alphabet }) }会导致组件重新渲染，现在您删除了单击的字母，它将不再显示。

class App extends React.Component {
  
  constructor (props) {
    super(props)
    
    // set the state alphabet as your array so that
    // we can re-render whenever we update it
    this.state = {
      alphabet : [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ']
    }
  }
  
  handleClick(letter) {
    const alphabet = [...this.state.alphabet]
    // remove the letter from the state
    const index = alphabet.indexOf(letter)
    if (index > -1) {
      alphabet.splice(index, 1);
    }
    this.setState({ alphabet })
  }
  
  render() {
    const { alphabet } = this.state

    return (<div className="containerAlph">
        {alphabet.map((letter, index) => <button className="AlphaBet" key={index} onClick={() => this.handleClick(letter)} value={letter}>{letter}</button>)}
      </div>);
}

}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

希望有所帮助。

这是一个有用的应用程序：

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

handleClick

＆＃13;

更新：正如对话中所提到的，以下是我认为您handleClick = (event, letter) => { // First do the stuff to make the button disappear const alphabet = [...this.state.alphabet] const index = alphabet.indexOf(letter) if (index > -1) { alphabet.splice(index, 1); } this.setState({ alphabet }) // now do the other stuff if (this.props.guesses.includes(event.target.value)) { return this.event.value } else { return this.props.makeGuess(event.target.value.toLowerCase()) } }应该包含您希望发生的其他内容的方式：

render() {
    const { alphabet } = this.state

    return (<div className="containerAlph">
        {alphabet.map((letter, index) => <button className="AlphaBet" key={index} onClick={(event) => this.handleClick(event, letter)} value={letter}>{letter}</button>)}
      </div>);
}

现在在render函数中，我们只需要传递两个参数：

Boolean

如何让我的按钮在onClick上消失（addclass in（click）event handler？））（反应）

1 个答案: