Question

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

    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,
};

在单击回调中正确调用了您的函数，但是更新状态的逻辑不起作用，因为它总是返回相同的状态。 this.num.number的值始终为4，因此在调用setState后，您的州的值始终为7。

您可以使用以前的状态来计算新状态，如下所示：

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

请参阅此JSFiddle

Answer 3

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

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中

3 个答案: