如何从React子组件中设置父组件的状态?

Question

在React页面上，我有:

<a
data-tab="settings"
onClick={() =>
this.setState({ active_tab: "settings" })
}
>
<i style={{ backgroundImage: "url(/icons/settings.svg)" }} />
<span>To settings</span>
</a>

如何将其重构为组件?我如何从组件更新父组件(即React页面)的本地状态?

---

1。与类:基于@tom203他的答案如下

组件文件:

import React, { Component } from "react";
class MyButton extends Component {
constructor(props) {
super(props);
this.state = {
tab: props.tab,
icon: props.icon,
label: props.label,
};
}
render() {
return (
<div>
<button
onClick={ () => this.props.updateActiveTab(this.state.tab) }
data-tab={ this.state.tab }
>
<i style={{ backgroundImage: `url(${this.state.icon})` }} />
<span> { this.state.label } </span>
</button>
</div>
)
}
};
export default MyButton;

React page (parent Component):

import MyButton from "../components/MyButton/";
class MyReactPage extends Component {
updateActiveTab = value => {
this.setState({ active_tab: value });
}
render() {
return (
...
<MyButton
updateActiveTab={this.updateActiveTab}
tab="settings"
icon="/icons/settings.svg"
label="To settings"
/>
...

---

2。使用React钩子

组件文件:

import React, { useState } from "react";
const MyButton = (tab, icon, label) => {
const [active_tab, setActive_tab] = useState("data");
return (
<button
data-tab={ tab }
onClick={ () => setActive_tab({ tab }) }
>
<i style={{ backgroundImage: `url(${icon})` }} />
<span> { label } </span>
</button>
);
};
export default MyButton;

在React页面(父组件):

import MyButton from "../components/MyButton/";
class MyReactPage extends Component {
render() {
return (
...
MyButton({
tab: "settings",
icon: "/icons/settings.svg",
label: "To settings",
})
...

钩子设置产生两个错误:

• 无效的钩子调用。类的函数体内部只能调用钩子功能组件。
• 声明了'active_tab'，但它的值从未被读取。

Answer 1

不能在函数中使用这种类型的状态。你需要一个React组件类或者使用一般的React钩子。

替换

const MyButton = (props) => {

class MyButton extends Component {
constructor(props) {
super(props);
}

和使用

render() {return (<div><a onClick={this.props.updateActiveTab(tab)} ...>XXX</a></div>)}

调用组件:

<MyButton updateActiveTab={this.updateActiveTab} />

主类:

...
updateActiveTab = value => {
this.setState({active_tab: {value}});
}
...

Answer 2

对于功能组件，你必须使用React Hooks。

这里有一个概览链接:https://reactjs.org/docs/hooks-intro.html

在你的情况下，看起来你只需要使用useState钩子来跟踪和更改active_tab状态。

我是这样做的:

import React from "react";
const MyButton = ({tab, icon, label}) => {

const [tab, setTab] = useState(tab)
return (
<div className="tab-button">
<a
data-tab={tab}
// next line doesn't work...
onClick={() => setTab(tab)}
>
<i style={{ backgroundImage: `url(${icon})` }} />
<span> {label} </span>
</a>
</div>
);
};

您看到的useState调用返回当前状态和一个用于更改状态的函数。

例如:

const [tab, setTab] = useState(tab)

这里tab是当前状态，setTab是一个接受参数的函数，在这个例子中是一个tab，它会将当前状态更改为传入的任何参数。

希望能有所帮助。让我知道:)