2017-03-10 38 views
1

我有这个AddUser组件,它是一个简单的组件,它从一个下拉列表中获取一个电子邮件地址和一个角色,然后将这两个值传递给父组件。除了一件事以外,一切工作正常:如果我第一次输入电子邮件地址,然后选择角色onChange()不会从dropdownlist中获取值,并将null传递给父组件。但是如果我先选择角色然后输入电子邮件,onChange()将获得两个值!我该如何解决它?将数据从表单发送到ReactJS中的父组件

这个组件有3个支柱:roles是一本字典,我创建从中rolesList使用它作为数据DropdownList(这是从react-widgethttps://jquense.github.io/react-widgets/docs/#/?_k=3fo3eq)。第二个道具是handleChange(),它设置父组件的状态。第三个是handleAddNewUser(),它将表单中的值返回给父组件。

export const AddUser = React.createClass({ 
    getInitialState() { 
     return { 
      email: "", 
      selectedRole: "", 
     }; 
    }, 

    onChange() { 
     var email = this.email.value; 
     this.props.handleChange(email, this.state.selectedRole); 
    }, 

    render() { 
     var rolesList = []; 
     for(var key in this.props.roles){ 
      rolesList.push(key); 
     } 
     return(
      <div > 
       <form onSubmit={this.props.handleAddNewUser}> 
        <label >New user email address:</label> 
        <input ref={(ref) => this.email = ref} name='email' type='email' onChange={this.onChange} required /> 
        <label >Choose a role for new user:</label> 
        <DropdownList data={rolesList} value={this.state.selectedRole} name='rolesList' onChange={selectedRole => this.setState({ selectedRole })} /> 
        <button type="submit" >Add user</button> 
       </form> 
      </div> 
     ); 
    }, 
}); 

更新:这是父组件的代码,handleChange()设置父组件的状态。 handleAddNewUser()应该使用状态并发出ajax请求来创建新用户。现在它得到了newUserEmail价值,但不是newUserRole

handleChange(email, selectedRole){ 
    this.setState({newUserEmail: email}) 
    this.setState({newUserRole: selectedRole}) 
}, 

handleAddNewUser(e) { 
    e.preventDefault(); 
    // using its state, it supposed to make an ajax request and create a new user 
    } 

回答

2

你可以,如果你想从提交处理程序得到的值。 Here is an example

编辑:组件DropdownList不创建一个真正的select表单元素,它只是创建一堆div元素。这就是为什么正常的event.target解决方案不起作用。您确实需要组件的自定义onChange处理程序。尝试下面的内容。它只会在本地设置状态,但这应该足以将此数据传送到任何父容器。您尚未发布this.props.handleChange的代码,因此无法知道可以采用哪些参数。

编辑2:添加提交处理程序以调用'this.props.handleChange'正确的数据。

export const AddUser = React.createClass({ 
     getInitialState() { 
      return { 
       email: "", 
       selectedRole: "", 
      }; 
     }, 

     onChange(e) { 
     this.setState({ 
      [e.target.name]: e.target.value 
     }) 
     }, 

     onSubmit(e) { 
     e.preventDefault(); 
     this.props.handleChange(this.state.email, this.state.selectedRole) 
     }, 

     render() { 
      var rolesList = []; 
      for(var key in this.props.roles){ 
       rolesList.push(key); 
      } 
      return(
       <div > 
        <form onSubmit={this.onSubmit}> 
         <label >New user email address:</label> 
         <input ref={(ref) => this.email = ref} name='email' type='email' onChange={this.onChange} required /> 
         <label >Choose a role for new user:</label> 
         <DropdownList ref={(ref) => this.role = ref} data={rolesList} value={this.state.selectedRole} name='rolesList' onChange={selectedRole => this.setState({ selectedRole })} /> 
         <button type="submit" >Add user</button> 
        </form> 
       </div> 
      ); 
     }, 
    }); 

注意this.setState({ [e.target.name]: e.target.value })用方括号像这样的设置对象键,但不提前知道名称的方式。在这种情况下,无论元素的名称是什么(电子邮件)。

+0

我刚刚试了一下。如果我写'onSubmit'与您的答案完全一样,它会将电子邮件地址添加到地址栏而不是角色:'?email = tes%40test.com'。另外,我不想那样。我需要它将数据从表单发送给父母并设置父母状态。我添加了'e.preventDefault()'到'onSubmit',它仍抱怨不知道'value'在这里:'const role = e.target.role.value;' – Birish

+0

我忘了添加'e.preventDefault()'感谢您指出了这一点。在这种情况下,您需要使用与您具有相同名称的表单元素“e.target.rolesList.value”。您应该能够将'handleAddNewUser'方法中父项的状态作为道具传递给您。就像'data => this.setState(data)',如果你发布父代码,它会有所帮助。 – spirift

+0

是的,这就是我所做的,只是在我之前的评论中犯了一个错误。使用'const role = e.target.rolesList.value;'返回此错误:'Uncaught TypeError:无法读取未定义的属性'值' – Birish

0

您只有在电子邮件输入值更改时才致电this.onChange()

因此,即使在输入this.onChange的第一个字符发送电子邮件值和this.role.value这是''

因此,添加if()来检查role是否有有效值。

检查role.valueonChange()

if(email.length > 0 && role.length > 0) 
    this.props.handleChange(email, role); 
+0

问题是它不理解'this.role.value '我得到这个错误:'未捕获的TypeError:无法读取未定义的属性'值' – Birish

相关问题