传递功能作为道具

时间:2019-10-30 21:55:19

标签: html reactjs react-props

我已经使用导入从另一个文件导入了功能。我希望能够在组件内部运行它,但是我不确定如何执行此操作。导入的功能是firebase的登录方法,但我无法正常使用。我要运行的功能是loginuser。我已经在组件中的何处进行了评论,但是我无法使其正确传递到组件中。有人可以帮忙吗?谢谢!

import { loginuser } from './redux/userfunctions'


class Login extends Component {



  constructor() {
    super();
    this.state = {
      email: '',
      password: '',
    };
  }


handleSubmit = (event) => {
  event.preventDefault();
  //console.log("submit selected");
  const userData = {
      email: this.state.email,
      password: this.state.password
    };
    this.props.loginUser(userData, this.props.history);  // this is where i call it and it is failing.
  };



  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

render() {
 return (
    <div className = "sign-in">
      <Topbar />
    <form onSubmit={this.handleSubmit}>
        <input
        type = "text"
        placeholder="Email"
        name="email"
        value={this.state.email}
        onChange = {this.handleChange}
        />

        <input
        type = "password"
        placeholder= "Password"
        name="password"
        value={this.state.password}
        onChange = {this.handleChange}
        />

        <button type = "submit"> Sign In </button>
      </form>

    </div>
  );
}
}

1 个答案:

答案 0 :(得分:1)

如果导入函数,则可以照原样调用它。仅当道具是实际的prop时,您才需要使用道具。

所以只需致电

loginUser(userData, this.props.history);

Props是一个反应构造。为了进一步了解它们如何工作,我建议阅读react.js文档中的components & props section