ReactJS 从子类更改另一个类的状态

Question

我试图理解 state.props 以帮助我将值从孩子传递给父母。我有一个header component（子），当单击链接时，它应该将值传递给App component（父）内的方法。然后，此方法设置用于其他事物的值的状态。我尝试在 App.js 文件中绑定该方法，但这不起作用。单击链接时出现错误：× TypeError: _this.changeSearchState is not a function

Header.js

import React, { Component } from "react";
import { Link } from 'react-router-dom';

class Header extends Component {

changeSearch = (e) => {
e.preventDefault();
   var type = this.value;
   this.changeSearchState(type);
}

render() {
return (
<header>
      <div className="float-right top-bar">
        <Link onClick={this.changeSearch} value="users" to="/users">Users</Link>
        <Link onClick={this.changeSearch} value="feedback" to="/feedback">Feedback</Link>
        ...
      </div>
</header>
)
}
}
export default Header;

App.js

class App extends Component {
constructor(props) {
super(props)
this.state = {
    isOpen: false,
    dataType: ''
}
this.changeSearchState = this.changeSearchState.bind(this);
}
changeSearchState = (dataType) => {
 this.setState({
  dataType: dataType
 });
}
...

Answer 1

我认为您想将changeSearchState 作为道具传递给Header 组件。

在render() for App.js：

<Header
    changeSearchState={this.changeSearchState}
/>

然后从 Header.js 访问它：

changeSearch = (e) => {
    e.preventDefault();
    var type = this.value;
    this.props.changeSearchState(type)
}

您可以阅读有关组件和道具的更多信息here。

Answer 2

您应该只在 一个 位置更新状态。所以你应该在Parent 组件中更新它并将它传递给Child。您可以像普通道具一样访问从父级传递给子级的方法。像这样的：

App.js

class App extends Component {
constructor(props) {
super(props)
this.state = {
    isOpen: false,
    dataType: ''
}
this.changeSearchState = this.changeSearchState.bind(this);
}
changeSearchState = (dataType) => {
 this.setState({
  dataType: dataType
 });
}
render() {
  return (
    <Header changeSearchState={this.changeSearchState} /> //this is what you want!!!
  )
}

Header.js

import React, { Component } from "react";
import { Link } from 'react-router-dom';

class Header extends Component {

changeSearch = (e) => {
e.preventDefault();
   var type = this.value;
   this.props.changeSearchState(type); // call it here with this.props!!
}

render() {
return (
<header>
      <div className="float-right top-bar">
        <Link onClick={this.changeSearch} value="users" to="/users">Users</Link>
        <Link onClick={this.changeSearch} value="feedback" to="/feedback">Feedback</Link>
        ...
      </div>
</header>
)
}
}
export default Header;