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

【问题标题】：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，让我创建一个正确的答案...快乐编码

标签： reactjs components state react-props

【解决方案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，以确定用户名是否在主组件中更新。

【讨论】：