React-使用状态之外的函数设置组件状态，这是错误的吗？

Question

在React组件之外的函数中使用setState是错误的吗？

例：

// myFunction.js
function myFunction() {
  ...
  this.setState({ ... })
}

// App.js
import myFunction from './myFunction

class App extends Component {
  constructor() {
    super()
    this.myFunction = myFunction.bind(this)
  }

  ...
}

Answer 1

我不确定您绑定的方式是否会真正起作用。您可以执行以下操作：

export const getName = (klass) => {
  klass.setState({ name: 'Colin'})
}

然后

class App extends Component {
  state = {
    name: 'React'
  };

  handleClick = () => {
    getName(this);
  }

  render() {
    return (
      <div>
        <p>{this.state.name}</p>
        <button onClick={this.handleClick}>change name</button>
      </div>
    );
  }
}

这里的工作示例。