Javascript 使用JSX单击React按钮的方法

我开始学习JS的基础知识，并编写了一个小示例来研究如何使用JSX在React中使用按钮，但我发现这有点让人困惑

我首先创建一个React组件，并在构造函数中用值

'bar'

初始化一个名为

bar

的变量

this.baz = this.baz.bind(this);

我想在按下按钮时将此值更改为

'baz'

我的代码如下所示：

<div id="root"></div>
<script type="text/babel">

    class Foo extends React.Component {
      constructor(props) {
        super(props);
        this.bar = 'bar'
      }

      baz(){
        this.bar = 'baz'
      }

      render() {
        return (
          <div>
            <button onClick={this.baz()}>baz</button>
            <p>{this.bar}</p>
          </div>
        );
      }
    }

    ReactDOM.render(
      <Foo />,
      document.getElementById('root')
    );

</script>

类Foo扩展了React.Component{
建造师（道具）{
超级（道具）；
this.bar='bar'
}
baz（）{
this.bar='baz'
}
render（）{
返回(
巴兹
{this.bar}

);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

与我的预期相反，当我在浏览器中加载包含此代码的页面时，会立即显示值

'baz'

---

很抱歉，我问了一个可能非常新手的问题，但我不明白为什么会立即显示

'baz'

，而不是在我按下按钮后才显示。谢谢您的时间。：）

您尝试使用函数的方式不正确。请参阅以下两种方法之一。另外，在构造函数中将函数绑定到此上下文

this.baz = this.baz.bind(this);

然后

或

---

之所以会立即显示

baz

，是因为您正在单击绑定中调用函数。您还应该将click处理程序绑定到React类。下面是一个示例，展示了它的外观：

<div id="root"></div>
<script type="text/babel">

    class Foo extends React.Component {
      constructor(props) {
        super(props);
        this.bar = 'bar';
        this.handleClick = this.handleClick.bind(this);
      }

      handleClick() {
        this.bar = 'baz';
      }

      render() {
        return (
          <div>
            <button onClick={this.handleClick}>baz</button>
            <p>{this.bar}</p>
          </div>
        );
      }
    }

    ReactDOM.render(
      <Foo />,
      document.getElementById('root')
    );

</script>

类Foo扩展了React.Component{
建造师（道具）{
超级（道具）；
this.bar='bar'；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
this.bar='baz'；
}
render（）{
返回(
巴兹
{this.bar}

);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

您在渲染过程中调用了

baz

函数，这就是更改立即发生的原因：

<button onClick={this.baz()}>baz</button>

baz

如果传递函数而不是调用函数，则在按下按钮时会调用该函数：

<button onClick={() => this.baz()}>baz</button>

this.baz（）}>baz

您需要将值存储在状态中，然后将click handler绑定到组件。然后使用

setState（）

更改状态的值。当状态更改时，组件将重新渲染：

class Foo extends React.Component {
      constructor () {
        super()
        this.state = {
          bar: 'bar'
        }
        this.handleClick = this.handleClick.bind(this)
      }
      handleClick () {
        this.setState({
          bar: 'baz'
        })
      }
      render () {
        return (
          <div>
            <button onClick={this.handleClick}>baz</button>
            <p>{this.state.bar}</p>
          </div>
        )
      }
}

类Foo扩展了React.Component{
构造函数（）{
超级（）
此.state={
酒吧：“酒吧”
}
this.handleClick=this.handleClick.bind（this）
}
handleClick（）{
这是我的国家({
酒吧：“巴兹”
})
}
渲染（）{
返回(
巴兹
{this.state.bar}

)
}
}

您可以尝试以下方法：

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: "bar" };
  }

  baz() {
    this.setState({ text: "baz" });
  }

  render() {
    return (
      <div>
        <button onClick={() => this.baz()}>baz</button>
        <p>{this.state.text}</p>
      </div>
    );
  }
}

ReactDOM.render(<Foo />, document.getElementById("root"));

类Foo扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={text:“bar”}；
}
baz（）{
this.setState（{text:“baz”}）；
}
render（）{
返回(
this.baz（）}>baz
{this.state.text}

);
}
}
render（，document.getElementById（“根”））；

---

问题是更新屏幕（DOM），最好更改状态，让组件重新渲染。对于最初改变值的问题，其他答案解释得很好

我在上面的一条评论中指出了解决方案，因此，我将对该评论进行进一步筛选

你有

<button onClick={this.baz()}>baz</button>

请参见此处的完整工作示例：

导入React，{Component}来自“React”；
类栏扩展组件{
建造师（道具）{
超级（道具）；
此.state={
酒吧：“酒吧”
};
}
handleClick=（）=>{
this.setState（{bar:“baz”}）；
};
render（）{
常量值=this.state.bar；
返回(
巴兹
{value}

);
}
}

有几件事：

• 在构造函数中设置状态
• 使用箭头函数（而不是构造函数中的绑定…cleaner）
• 在指定函数中不会更改的值时使用常量

---

我想，你想要，

onClick={（）=>this.baz（）}

？@holdoff为什么要使用不必要的生命？其思想是将函数作为值传递给property@RafaelHovsepyan当前位置似乎与这种变化相适应。我用一个代码沙盒发布了一个答案。或者你可以使用arrow函数，去掉

bind

s

handleClick=（）=>{this.bar='baz'}

注意，仅仅传递{this.baz}不会给函数赋予正确的作用域，而设置this.bar也不会起作用，除非你以某种方式将作用域绑定到函数（使用箭头函数或.bind）

<button onClick={this.baz()}>baz</button>

<button onClick={() => this.baz()}>baz</button>

this.setState(this);

import React, { Component } from "react";

class Bar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bar: "bar"
    };
  }

  handleClick = () => {
    this.setState({ bar: "baz" });
  };

  render() {
    const value = this.state.bar;
    return (
      <div>
        <button onClick={this.handleClick}>baz</button>
        <p>{value}</p>
      </div>
    );
  }
}