Question

在我的组件中，我有两个按钮，我希望onClick函数根据组件状态进行更改。

是否可以为状态变量分配函数引用？

例如

 constructor() {
       this.foo = this.foo.bind(this);
       this.bar = this.bar.bind(this);
       this.state = {
         buttonMessage: "hello",
         buttonFunction: foo
       }
      }

    foo() {
      this.setState({
        buttonFunction: bar
      })
    }

    bar() {
      this.setState({
        buttonFunction: foo
      })
    }
   }

当我尝试上面的代码时，我得到一个错误，说foo和bar没有定义。也许这只是一个语法错误？很高兴知道是否可以为状态变量分配函数引用。

Answer 1

这是你想要的吗？

Comparable

// import React from 'react';

class HelloKitty extends React.Component {
  constructor(args) {
    super(args);
    this.foo = this.foo.bind(this);
    this.bar = this.bar.bind(this);

    this.state = {
      buttonMessage: "hello",
      buttonFunction: this.foo
    };
  }

  foo() {
    this.setState({
      buttonFunction: () => alert('foo'),
    })
  }

  bar() {
    this.setState({
      buttonFunction: () => alert('bar'),
    })
  }


  render() {
    return (
      <div className="root">
        <div>
          <span onClick={this.foo}>I'am foo</span>
          <span onClick={this.bar}>I'am bar</span>
        </div>

        <span onClick={this.state.buttonFunction}>{this.state.buttonMessage}</span>
      </div>
    );
  }
}

ReactDOM.render(
  <HelloKitty />,
  document.getElementById('container')
);

.root {
  display: flex;
  flex-direction: column;
  width: 50%;
}
  
.root div {
  display: flex;
  justify-content: space-between;
}

span {
  border: 1px solid black;
  margin: 30px;
  padding: .5em;
  width: 100px;
  cursor: pointer;
}
span:hover {
  background-color: #8f8;
}

Answer 2

简单的答案从对原始问题的评论中的讨论得出结论：是的，这是可能的。

我的例子中的问题是我忘了使用＆＃34;这个＆＃34;在this.setState({buttonFunction: foo})中分配函数引用时，它应该是this.setState({buttonFunction: this.foo})。

以下代码可以使用：

 constructor() {
       this.foo = this.foo.bind(this);
       this.bar = this.bar.bind(this);
       this.state = {
         buttonMessage: "hello",
         buttonFunction: this.foo
       }
      }

    foo() {
      this.setState({
        buttonFunction: this.bar
      })
    }

    bar() {
      this.setState({
        buttonFunction: this.foo
      })
    }
   }

非常感谢Yury Tarabanko提供帮助。

Answer 3

对于功能组件：

 const [state, setState] = useState({
    viewToBarChange: "",
  });

<Tree
    setViewToBarChange={(callBack) => {
     setState({ ...state, viewToBarChange: callBack });
      }}
  >
</Tree>

是否有可能在反应中为状态分配函数引用？

3 个答案: