按钮单击不会更新我的 React 应用程序中的状态答案

【问题标题】：Button click won't update state in my React app按钮单击不会更新我的 React 应用程序中的状态
【发布时间】：2018-11-22 20:50:46
【问题描述】：

单击按钮应将我的工作卡数组过滤为仅一个类别。例如。按钮“营销”应该过滤到数组中具有道具“jobstags：营销”的那些工作。我使用了一个非常相似的过程，比如我的输入，它完美地过滤了工作。

我可以使用相应的值（“营销”）控制台记录我的事件（按钮单击）。但它仍然无法正确过滤...

在我的应用中我这样做了：

export default class App extends Component {
  state = {
    jobs: jobs,
    searchfield: '',
    jobtags: ''
  }

  onSearchChange = event => {
    this.setState({ searchfield: event.target.value })
  }

  onClickChange = event => {
    console.log(event.target.value)
    this.setState({ jobtags: event.target.value })
  }

  render() {
    const filteredJobs = this.state.jobs.filter(job => {
      return (
        job.position
          .toLowerCase()
          .includes(this.state.searchfield.toLowerCase()) ||
        job.company
          .toLowerCase()
          .includes(this.state.searchfield.toLowerCase()) ||
        job.jobtags.toLowerCase().includes(this.state.jobtags.toLowerCase())
      )
    })

    // this.save()

    if (this.state.jobs.length === 0) {
      return <Loading>Loading...</Loading>
    } else {
      return (
        <Router>
          <React.Fragment>
            <Route
              exact
              path="/"
              render={() => (
                <Home
                  jobs={filteredJobs}
                  searchChange={this.onSearchChange}
                  clickChange={this.onClickChange}
                />
              )}
            />

onClickChange 应该更新tags 的状态

在我的 Home 组件中，我只需将值传递给 Categories 组件：

<Categories clickChange={clickChange} />

最后它到达了我的类别组件，我说：

export default class Categories extends Component {
  render() {
    const { clickChange } = this.props
    return (
      <Wrapper>
        <button value="Marketing" onClick={clickChange}>
          <img
            alt="Button"
            src={require('/Users/markus/Documents/q4-2018/jobs-app/src/img/computer.png')}
          />
          Frontend
        </button> ...

有什么想法吗？谢谢！

【问题讨论】：

在<Home /> 中将clickChange={this.onClickChange} 替换为clickChange={this.onClickChange.bind(this)}。
不幸的是，这不起作用改变任何东西......
哦，我明白了。你还有一个错误。您不能直接在 App 组件中定义 state。您需要在构造函数中定义初始状态。请参阅@Versifiction 的答案。
不看所有代码很难说。以您应该工作的方式传递事件处理程序，所以我认为这不是您的问题。考虑使用上下文对象来提供此功能，而无需将处理程序“钻取”到需要它们的位置

标签： javascript arrays reactjs state

【解决方案1】：

也许您必须绑定“onClickChange”的“this”，例如在您的 App 类的构造函数中。

例子：

export default class App extends Component {
  constructor(props) {
  super(props);
  this.state = {
    jobs: jobs,
    searchfield: '',
    jobtags: ''
  };
  this.onClickChange = this.onClickChange.bind(this);

我认为它会起作用

【讨论】：

【解决方案2】：

你必须绑定它。将此行添加到您的构造函数：

this.onClickChange = this.onClickChange.bind(this);

【讨论】：