处理父组件内的子组件事件

时间:2019-10-15 11:27:45

标签: reactjs react-redux

在reactjs中,我想确定最佳实践解决方案,因此我有一个称为Main的父组件。而且我还有子组件Form。这是主要的:

<Form 
    adminname={this.state.adminname}
    password={this.state.password}
    Input={this.handleInput}
    Submit={this.handleForm}
    error={this.props.error}
/>

这是子组件表单

<div className="form-container">
        <form onSubmit={this.props.Submit} className="formc" action="/api/sign-in" method="POST">
            <input type="text" className="adminname" name="adminname" placeholder="Administrator" value={this.props.adminname} onChange={this.props.Input} />
            <input type="password" className="password" name="password" placeholder="password" value={this.props.password} onChange={this.props.Input} />
            <input type="submit" className="submitbtn" value="Sign In"/>
            {this.props.error ? <h3 className="error">{this.props.error}</h3> : null}
        </form>
</div>

我应该添加此代码

handleInput(e){
    e.preventDefault();
    this.setState({
        [e.target.name]: e.target.value
    })
}
handleForm(e){
    e.preventDefault();
    let dataToPass ={
        adminname: this.state.adminname,
        password: this.state.password
    }
    this.props.signin(dataToPass)
}

是Main还是Form?哪个是最佳做法

(通过我使用react-redux的方式)

0 个答案:

没有答案