该InputField&Button是进入一个表单创建一个表单自定义组件。我的问题是如何将数据发送回表单,以便在单击按钮时可以使用数据(用户名和密码)在表单上触发Ajax:
InputField
Button
export default auth.authApi( class SignUpViaEmail extends Component{ constructor(props){ super(props); this.state = { email : "", password : "" }; this.storeEmail = this.storeEmail.bind( this ); this.storePassword = this.storePassword.bind( this ); } storeEmail(e){ this.setState({ email : e.target.value }); } storePassword(e){ this.setState({ password : e.target.value }); } handleSignUp(){ this.props.handleSignUp(this.state); } render(){ return( <div className="pageContainer"> <form action="" method="post"> <InputField labelClass = "label" labelText = "Username" inputId = "signUp_username" inputType = "email" inputPlaceholder = "registered email" inputClass = "input" /> <Button btnClass = "btnClass" btnLabel = "Submit" onClickEvent = { handleSignUp } /> </form> </div> ); } } );
还是不建议这样做?我不应该在表单中创建自定义子组件?
子组件=> InputField
import React, { Component } from "react"; export class InputField extends Component{ constructor( props ){ super( props ); this.state = { value : "" }; this.onUserInput = this.onUserInput.bind( this ); } onUserInput( e ){ this.setState({ value : e.target.value }); this.props.storeInParentState({[ this.props.inputType ] : e.target.value }); } render(){ return <div className = ""> <label htmlFor = {this.props.inputId} className = {this.props.labelClass}> {this.props.labelText} </label> <input id = {this.props.inputId} type = {this.props.inputType} onChange = {this.onUserInput} /> <span className = {this.props.validationClass}> { this.props.validationNotice } </span> </div>; } }
错误:我e.target is undefined在父storeEmail函数上收到错误。
e.target is undefined
React的单向数据绑定模型意味着, 除非明确允许,否则 子组件无法将值发送回父组件。React的方法是将回调传递给子组件(请参阅Facebook的“ Forms”指南)。
class Parent extends Component { constructor() { this.state = { value: '' }; } //... handleChangeValue = e => this.setState({value: e.target.value}); //... render() { return ( <Child value={this.state.value} onChangeValue={this.handleChangeValue} /> ); } } class Child extends Component { //... render() { return ( <input type="text" value={this.props.value} onChange={this.props.onChangeValue} /> ); } }
请注意, 父组件处理状态,而子组件仅处理display 。Facebook的“提升状态”指南是学习如何执行此操作的好资源。
这样, 所有数据都位于父组件中(处于状态),而子组件仅被赋予一种更新数据的方式(回调作为props传递) 。现在,您的问题已解决:父组件可以访问所需的所有数据(因为数据存储在状态中),但是子组件负责将数据绑定到它们自己的单独元素(例如<input>标签)。
<input>