onClick 事件在 ReactJS 中不起作用

Question

我有一个反应代码，其中有 onClicke 事件。我想得到函数（someFunction）的实现。我没有收到任何错误运行这段代码，其他一切正常。我想问题可能出在功能上。 React 代码是

    class Hello extends Component {
  constructor() {
    super();
    this.num = { number: 4 };
    this.someFunction = this.someFunction.bind(this);
  }

  someFunction() { this.setState({ number: this.num.number + 3 }); }

  render() {
    const coco = {
      color: 'blue',
      background: 'yellow',
      width: '200px',
      height: '200px',
      padding: 'lem'
    };

    return (<div style={coco} onClick={this.someFunction}>
      <p style={coco} onClick={this.someFunction}> bly blya
        Hello {this.props.name} </p>
      <p style={coco} onClick={this.someFunction} >
        Current count: {this.num.number + 3}
      </p>
    </div>)
  }
}

render(<Hello/>, document.getElementById('container'));

Answer 1

你应该替换：

Current count: {this.num.number + 3}

与：

Current count: {this.state.num.number + 3}

Answer 2

而不是定义 this.num，您应该在构造函数中定义组件的初始状态：

this.state = {
  number: 4,
};

您的函数在点击回调时被正确调用，但是更新状态的逻辑不起作用，因为它总是 returns 相同的状态。 this.num.number 始终具有 4 的值，因此在调用 setState 后您的状态将始终具有 7 的值。

您可以像这样使用以前的状态来计算新状态：

this.setState((prevState) => {
    return {
        number: prevState.number + 3
    };
});

看到这个JSFiddle

Answer 3

实际上它工作得很好，你的组件没有更新，因为它不依赖于 state 事实上你没有在 constructor 中定义任何 state这可能是一个错字..

import React , {Component} from 'react'
import ReactDOM from 'react-dom'

class Hello extends Component {
  constructor() {
    super();
    // defining state 
    this.state = { number: 4  };
    this.someFunction = this.someFunction.bind(this);
  }

  someFunction() { 
    //chnaging state case re-render for component 
    this.setState({number: this.state.number + 3 }); 
  }

  render() {
    const coco = {
      color: 'blue',
      background: 'yellow',
      width: '200px',
      height: '200px',
      padding: 'lem'
    };

    return (
      <div style={coco} onClick={this.someFunction}>
        <p style={coco} onClick={this.someFunction}> bly blya
          Hello {this.props.name} </p>
        <p style={coco} onClick={this.someFunction} >
          Current count: {this.state.number + 3 /*need to use state here .  */}
        </p>
      </div>
    )
  }
}

ReactDOM.render(<Hello/>, document.getElementById('container'));

onClick 事件在 ReactJS 中不起作用

onClick event doesn't act in ReactJS

javascript

events

web

reactjs

react-jsx