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

Posted 2023-02-22

【中文标题】ReactJS 从子类更改另一个类的状态

【英文标题】：ReactJS change state of another class from child

【发布时间】：2018-08-01 03:20:37

【问题描述】：

我试图理解 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
 );

...

【参考方案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。

【参考方案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;

【讨论】：

谢谢，这解决了和其他问题一样的答案，尽管他早了 1 分钟 :)