Question

我正在尝试在React中创建一个组件，您可以在点击时迭代+1或-1。请查看jsfiddle并告诉我我在哪里错过了这一点。非常感谢所有可能的帮助。

展望未来，

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {clickCount: 0};
    console.log(this.state)
  } 

  handleClickInc(){
    this.setState({count:this.state.clickCount + 1})
    }

  handleClickDec(){
     this.setState({count:this.state.clickCount - 1})
  }

 render(){
    return 
    <div>
        <div>
        {this.props.clickCount}
        </div>
        <button onClick={this.handleClickInc}>{"+"}</button>
        <button onClick={this.handleClickDec}>{"-"}</button>
      </div>
  }

}

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

html部分

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Answer 1

你的问题是：

1）你的gsub(",.*$", "", colnames(final)[i]) (changed the , to ..) gsub("...*$", "", colnames(final)[i])函数没有包含在parens中，导致语法错误。

2）您的点击处理程序未绑定到return（即您需要调用this或使用上面提到的胖箭头语法。

3）如上所述，您正在更新this.handleClickInc.bind(this)的状态，但您打算更新count。

这是一个工作小提琴。

https://jsfiddle.net/6z3cuLys/5/

Answer 2

看起来你可能会遗漏.bind()。没有它，this具有错误的上下文，因为它触发了函数。

尝试

    <button onClick={this.handleClickInc.bind(this)}>{"+"}</button>
    <button onClick={this.handleClickDec.bind(this)}>{"-"}</button>

或者，胖箭头功能通常会为你工作

    <button onClick={() => this.handleClickInc()}>{"+"}</button>
    <button onClick={() => this.handleClickDec()}>{"-"}</button>

Answer 3

首先，所有渲染元素必须返回正确吗？所以你的回报缺少包裹div的（）。

其次，要在函数中使用state，您必须绑定该函数。我用它将语句放在构造函数中。

你可以这样说：

this.handleClickInc = this.handleClickInc.bind(this);

为其他功能制作它，它将起作用。

迭代React中的单击

3 个答案: