javascript - 在 ReactJS 中将数据从表单发送到父组件

Question

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

这个组件有 3 个属性:roles 是一个字典，我正在从它创建 rolesList 以将其用作 DropdownList 的数据(它来自 react-widget, https://jquense.github.io/react-widgets/docs/#/?_k=3fo3eq )。第二个 Prop 是 handleChange()，它设置父组件的状态。第 3 个是 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 的代码，因此无法知道它可以采用哪些参数。

Edit2:添加提交处理程序以使用正确的数据调用“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 }) 像这样使用方括号是一种在不知道前面的名称的情况下设置对象键的方法的时间。在这种情况下，无论元素的名称 prop 是什么(电子邮件)。