时间戳

首页 > 解决方案 > 单击 ReactJs 中的 Switch Name 按钮后没有得到正确的输出

javascript - 单击 ReactJs 中的 Switch Name 按钮后没有得到正确的输出

问题描述

单击 ReactJs 中的 Switch Name 按钮后没有得到正确的输出

应用程序.js：

        state = {
            persons: [
              { name: 'Max', age: 25 },
              { name: 'Manu', age: 29 },
              { name: 'Stephanie', age: 26 }
            ]
        }

        switchNameHandler = () => {
            console.log('Was clicked!');      
        }

        render() {
            return (
              <div className="App">
                <h1> Working................ </h1>
                <Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
                <Person name="abc" age="20" />
                <Person name="uvw" age="20" />
                <Person name="uvw" age="20" />
                <Person name="lmno" age="20" >Working.........</Person>
                <button onClick={this.switchNameHandler()}>switch Name</button>
              </div>
            );
        }

输出：（点击6-7次后）

log.js:24 [HMR] Waiting for update signal from WDS...
react-dom.development.js:24994 Download the React DevTools for a better development experience: .....
App.js:20 Was clicked!
App.js:20 Was clicked!
DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
Grammarly.js:2 [DEFAULT]: WARN : Using DEFAULT root logger

标签： javascriptnode.jsreactjs

解决方案

你的问题就在这里。

<button onClick={this.switchNameHandler()}>switch Name</button>

你不需要()函数结束时的。如果你有()函数switchNameHandler被执行并且函数的返回值（如果有的话）被分配给 onClick 处理程序。

你需要像这样给 onClick

<button onClick={this.switchNameHandler}>switch Name</button>

或者

<button onClick={()=>this.switchNameHandler()}>switch Name</button>

onClick 需要一个函数，而不是函数的返回，除非返回是另一个函数。

推荐阅读