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

Question

A button click shall filter my job-card array to only one category. Eg button "Marketing" should filter to those jobs from array who have prop "jobstags: Marketing". I used a very similar procedure like for my input which filters jobs perfectly.

I can console log my event (the button click) with the according value ("Marketing"). But it still doesn't filter correctly...

In my app I did this:

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 is what should update the state of tags

In my Home component I then simply pass the value on to the Categories component:

<Categories clickChange={clickChange} />

Finally it arrives in my Categories component where I say:

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> ...

Any ideas? Thx!

Answer 1

maybe you have to bind the "this" of "onClickChange", for example in the constructor of your App class.

Example :

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

and it will work I think

Answer 2

You will have to bind it. Add this line to your constructor:

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