Question

我开始学习JS的基础知识，并写了一个小例子来检查按钮如何在使用JSX的React中工作，但我发现它有点令人困惑。

我首先创建一个React组件，并在构造函数中用值'bar'初始化一个名为bar的变量。

我想在按下按钮时将此值更改为'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>

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

我很抱歉提出一个可能很新的问题，但我不明白为什么立即显示“ baz”，而不是仅在按下按钮后才显示。谢谢您的时间：）

Answer 1

您可以尝试

extension BoardViewController : UICollectionViewDragDelegate
{
func collectionView(_ collectionView: UICollectionView, 
itemsForBeginning session: UIDragSession, at indexPath: IndexPath) -> 
[UIDragItem]
{
    let item = self.itemArray[indexPath.row]
    let itemProvider = NSItemProvider(object: item as! NSObject as! 
NSItemProviderWriting)
    let dragItem = UIDragItem(itemProvider: itemProvider)
    dragItem.localObject = item
    return [dragItem]
}

事情是更新屏幕（DOM）更好地改变状态以使组件重新呈现。对于价值最初发生变化的问题，其他答案可以很好地解释它们

Answer 2

我在上面的评论中指出了解决方案，因此，我将进一步阐述该评论...

你有...

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

你想要...

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

我还删除了其余代码，以生成所需的结果（“我希望在按下按钮时将此值更改为'baz'。”）。您还需要...

this.setState(this);

在此处查看完整的工作示例：

https://codesandbox.io/s/vj904qy4o0

Answer 3

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

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

然后

onClick={this.baz}

OR

onClick={() => this.baz()}

Answer 4

立即显示baz的原因是因为您在点击绑定中调用了该函数。您还应该将点击处理程序绑定到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>

Answer 5

您正在渲染期间调用baz函数，这就是更改立即发生的原因：

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

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

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

Answer 6

您需要将值存储为状态，然后将单击处理程序绑定到组件。然后使用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>
        )
      }
    }

Answer 7

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

几件事情：

在构造函数中设置状态
使用箭头函数（而不是在构造函数中进行绑定...更清洁）
分配不变的值时使用const

使用JSX的React Button的onClick方法

7 个答案: