Question

我无法将值从子组件传递给父组件。我是新来的反应者，请引导我。

这是Greeting组件-

select item_type, date, thresh_rchd, 
       sum(thresh_rchd) over(partition by item_type, date) as total_thresh
from tablename

这是登录组件-

/* eslint-disable react/prop-types */
import React from "react";
const Greeting = props => {
  const isLoggedIn = props.isLoggedIn;
  const name = props.name;

  if (isLoggedIn) {
    return <h1> Welcome Back {name}</h1>;
  } else {
    return <LoginInfo name={name} onChange={props.onChange} />;
  }
};

function LoginInfo(props) {
  return (
    <div>
      <h1> Please Login</h1>
      <input type="text" value={props.name} onChange={props.onChange} />
    </div>
  );
}

export default Greeting;

我正在我的应用程序中使用

import React, { Component } from "react";
import Greeting from "./Greeting";
import LogoutButton from "./LogoutButton";
import LoginButton from "./LoginButton";

class Login extends Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {
      isLoggedIn: false,
      name: ""
    };
  }

  handleLoginClick() {
    this.setState({ isLoggedIn: true });
  }
  handleLogoutClick() {
    this.setState({ isLoggedIn: false });
  }
  onChange = e => {
    this.setState({
      name: e.target.value
    });
  };

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    const name = this.state.name;

    let button;

    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting
          isLoggedIn={isLoggedIn}
          name={name}
          onChange={this.onChange}
        />
        {button}
      </div>
    );
  }
}

export default Login;

在问候语部分中，无论用户输入什么内容，我都可以将其存储在状态中，并在带有名称的欢迎背线中显示。

Answer 1

我认为您需要维护父组件中的状态，并从子组件中发出更改事件并更改父中的状态。喜欢

在登录组件中

nameChange = (e) => {
        this.setState({
          name: e.target.value
        })
    }

 <Greeting isLoggedIn={isLoggedIn} name={this.state.name} nameChange={this.nameChange}/>

和孩子

<input
        type="text"
        name="name"
        value={this.props.name}
        onChange={this.props.nameChange}
      />

Answer 2

因此，这就是我重构UnityEngine.SystemInfo.deviceUniqueIdentifier组件代码以将用户值传递给LogInInfo组件的方法

首先，由于要存储用户的值，因此需要在LogIn中有一个状态，您将为此状态使用

LogInInfo

这时，您已经具有要传递给父组件/* eslint-disable react/prop-types */ import React from "react"; const Greeting = props => { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <h1> Welcome Back</h1>; } else { return <LoginInfo submitForm={props.handleSubmitForm}/>; } }; class LoginInfo extends React.Component { constructor(props) { this.state = { name: "" } } handleChange = (event) => { this.setState({ name: event.target.value }) } render(){ return ( <div> <h1> Please Login</h1> // e is the event that is passed automatically to the function in onSubmit <form onSubmit={e => this.props.submitForm(e, this.state.name)}> <input type="text" name="name" value={name} onChange={this.handleChange} /> <input type="submit" /> </form> </div> ); } } export default Greeting;的值，以将该值传递给父组件，您需要在父组件中有一个函数可以为您获取该值并将其传递给子组件组件以便可以使用，我们将通过道具来完成。我们还需要一个处于父级状态的变量来存储该值

LogIn

单击提交按钮时，它应该更新import React, { Component } from "react"; import Greeting from "./Greeting"; import LogoutButton from "./LogoutButton"; import LoginButton from "./LoginButton"; class Login extends Component { constructor(props) { super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = { isLoggedIn: false, username: "" }; } handleLoginClick() { this.setState({ isLoggedIn: true }); } handleLogoutClick() { this.setState({ isLoggedIn: false }); } // when you use arrow functions they automatically bind to your component handleSubmitForm = (e, value) => { // the following line prevents the page from refreshing when you submit any form e.preventDefault() this.setState({ username: value }) } render() { const isLoggedIn = this.state.isLoggedIn; let button; if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; } return ( <div> <Greeting isLoggedIn={isLoggedIn} submitForm={this.submitForm}/> {button} </div> ); } } export default Login;组件中的状态。希望这会有所帮助

Answer 3

您需要做两件事：

创建一个函数，该函数将处理Login组件中输入的更改，将其发送给Greeting，然后发送给LoginInfo。该函数将类似于：
onChange = (event) => this.setState({event.target.name: event.target.value})
注意：event.target.name等于输入的名称prop。仅当存储该输入值的状态名称等于输入名称（在您的情况下为名称）时，以上函数才起作用。
将存储输入值的状态发送到LoginInfo。输入元素应如下所示：
<input type="text" name="name" value={valueFromLogin} onChange={props.onChangeFromLogin} />

无法将值传递给父组件做出反应

3 个答案: