Question

单击按钮应将我的工作卡阵列仅过滤到一个类别。例如。按钮“市场营销”应筛选具有属性“工作标签：市场营销”的阵列中的那些工作。我对输入使用了非常类似的过程，可以完美地过滤作业。

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

在我的应用中，我做到了：

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

有什么想法吗？谢谢！

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

它会起作用

Answer 2

您将不得不绑定它。将此行添加到您的构造函数中：

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

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

2 个答案: