将数据从表单发送到ReactJS中的父组件

Question

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

这个组件有3个支柱：roles是一本字典，我创建从中rolesList使用它作为数据DropdownList（这是从react-widget，https://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 
    } 

Answer 1

你可以，如果你想从提交处理程序得到的值。 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 })用方括号像这样的设置对象键，但不提前知道名称的方式。在这种情况下，无论元素的名称是什么（电子邮件）。

Answer 2

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

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

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

检查role.value内onChange()

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