分享
三行代码  ›  专栏  ›  技术社区  ›  65535

反应:如何处理单击以更改DOM?

  •  1
  • 65535  · 技术社区  · 1 周前

    有一个 handleClick() 函数,该函数用于在单击按钮时用新文本更新DOM,但是,当单击该按钮时,没有输出到DOM。任何帮助都将不胜感激。

    class DisplayMessages extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          quote: ''
        };
        this.handleClick = this.handleClick.bind(this)
      }
      handleClick() {
        let quotes = ['this is a quote', 'this is another quote', 'this is third'];
        let authors = ['somebody1', 'somebody2', 'somebody3'];
        let random = Math.floor((Math.random() * 3) + 1);
        let quote = quotes[random];
        this.setState({
          quote: this.quote
        });
      }
    
      render() {
        return (
          <div>
          <span id="text"><p>{this.state.quote}</p></span>
          <span id="author"></span>
          <button id="new-quote" onClick={this.handleClick}>New quote</button>
          <a id="tweet-quote" title="Tweet this quote!" href="twitter.com/intent/tweet" target="_blank">
          <button>Tweet</button></a>
          <a id="tumblr-quote" title="Post this quote on tumblr!" target="_blank">
          <button>Tumblr</button></a>
          </div>
        );
      }
    };
    
    /*
    * Render the above component into the div#app
    */
    ReactDOM.render(<DisplayMessages />, document.getElementById("app"));
    html {
      background-color: hsl(0, 100%, 28%);
    }
    
    body {
      text-align: center;
    }
    
    #quote-box {
      width: 100%;
      height: auto;
      max-width: 945px;
      margin-left: auto;
      margin-right: auto;
      display: block;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
    
    <main id="main">
      <h1 id="title">Random Quote Machine</h1>
      <div id="quote-box">
        <div id="app">
          </app>
          <a class="button" id="tweet-quote" title="Tweet this quote!" href="twitter.com/intent/tweet" target="_blank">
            <button>Tweet</button></a>
          <a class="button" id="tumblr-quote" title="Post this quote on tumblr!" target="_blank">
            <button>Tumblr</button></a>
        </div>
    </main>
    3 回复  |  直到 1 周前
        1
  •  1
  •   HoldOffHunger Alexander    1 周前

    你需要修复你的随机数发生器。。。

    console.log(Math.floor((Math.random() * 3)));

    下一个问题是你定义 quote setState()

    let quote = quotes[random];
    this.setState({
        quote: this.quote
    });
    

    ……到。。。。

    let quote = quotes[random];
    this.setState({
        quote: quote
    });
    

    我看不出来 this.quote 定义了,所以,你不能使用它。

        2
  •  1
  •   Tarukami    1 周前

    句柄()中有一些错误:

    handleClick() {
        let quotes = ['this is a quote', 'this is another quote', 'this is third'];
        let authors = ['somebody1', 'somebody2', 'somebody3'];
        let random = Math.floor((Math.random() * 3)); //this must return indexes from 0 to 2
        let quote = quotes[random]; // no array 'messages', it should be quotes here
        this.setState({quote: quote}); //no need for 'this' here
      }
    
        3
  •  0
  •   Ndifreke    1 周前

    this.quote 不存在,我想你是说

    this.setState({
          quote
        });