传入一个函数作为道具

Question

我使用导入从另一个文件导入了一个函数。我希望能够运行它在组件内部，但我不确定如何执行此操作。导入的函数是 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>
  );
}
}

Answer 1

如果您导入一个函数，您可以直接调用它。只有当它是真实的 prop.

时，你才需要使用道具

所以只要打电话

loginUser(userData, this.props.history);

Props 是一个反应结构。要进一步了解它们的工作原理，我建议阅读 react.js 文档中的 components & props section。

传入一个函数作为道具

passing in a function as props

html

reactjs

react-props