将状态从其他组件更新到主组件

Posted 2023-02-23

【中文标题】将状态从其他组件更新到主组件

【英文标题】：Update state from other Component to Main Component

【发布时间】：2021-11-02 12:14:00

【问题描述】：

我在我的 React-Project 中创建了一个组件/文件，以便我可以更好地组织它。 我已经导出了一个 Login-Component <SignInSide></SignInSide> 并将其导入到我的主文件中：

主文件：

export default class Login extends Component 

  constructor(props) 
    super(props);
    this.onChangeUsername = this.onChangeUsername.bind(this);

    this.state = 
      username: ""
    ;
  

  onChangeUsername(e) 
    this.setState(
      username: e.target.value
    );
  

  render() 

    return (
        <SignInSide></SignInSide>
    );
  

这是我非常基本的登录组件。正如我已经说过的，当我将其导入为<SignInSide></SignInSide> 时，我只想调用this.onChangeUsernam，但我不知道我必须在登录组件内部的onClick-Argument 中写什么来获取/更新来自Main 的状态-文件。

登录组件

export default function SignInSide(props) 

  return (
          <form className=classes.form>
            <TextField/>
            <Button>
              Login
            </Button>
          </form>
  );

非常感谢您的帮助。你能给我一个简短易懂的例子，以便我可以自己将它添加到我的项目中吗？我只需要明白，我必须做什么。

【问题讨论】：

我相信您需要在点击按钮时将state 更新为TextField？

@KavinduVIndika 是的，但我不知道该怎么做，因为这是两个单独的文件，状态部分在另一个文件中！你能帮帮我吗？？？

是的，确定@Fynn，让我创建一个正确的答案...快乐编码

【参考方案1】：

要更新Login组件的状态，你需要将props从父组件传递到子组件（将props从Login传递到SignInSide组件）。

因此，您需要将onChangeUsername 方法作为道具传递给<SignInSide/> 组件。在SignInSide 组件内部，您需要管理一个本地状态以保留您输入的文本输入。只有在提交data时才需要使用它，它触发了从父组件传递过来的onClick函数onChangeUsername。

主文件：

import  Component  from "react";
import SignInSide from "./SignInSide";

export default class Login extends Component 
  constructor(props) 
    super(props);
    this.onChangeUsername = this.onChangeUsername.bind(this);

    this.state = 
      username: "",
    ;
  

  onChangeUsername(data) 
    this.setState(
      username: data,
    );
  

  render() 
    console.log("username updated: ", this.state.username);
    return <SignInSide onChangeUsername=this.onChangeUsername />;
  

SignInSide 组件：

import  useState  from "react";

export default function SignInSide(props) 
  const [data, setData] = useState("");

  const handleChange = (e) => setData(e.target.value);
  return (
    <form>
      <label>
        User Name:
        <input type="text" value=data onChange=handleChange />
      </label>
      <button type="button" onClick=() => props.onChangeUsername(data)>
        Submit
      </button>
    </form>
  );

应用程序视图

检查应用程序视图中显示的console logs，以确定用户名是否在主组件中更新。