Question

我有一个Todo组件。我试图将onSubmitHandle（）作为回调函数传递给子组件，该子组件又是一个对话框。该对话框有4个输入字段。我的要求是所有4个输入字段的值都应传递到其父组件并在父组件中更新。有人可以帮忙吗？

我的Todo组件：

onSubmitHandle(event) { 
      event.preventDefault();
      this.setState({students: [...this.state.students, {id:event.target.id.value,name: event.target.item.value,age:event.target.xyz.value,email:event.target.email.value}]  })
        event.target.item.value = '';
        event.target.id.value = parseInt(event.target.id.value)+parseInt(1);
        event.target.email.value = '';
        event.target.xyz.value = ''};

还在渲染功能中，我将其传递给子组件FormDialog：

render() 

          {    
           return<div style={{width: "500px",background : "beige"}} >          


                 <button onClick={this.signUpDialog.bind(this)}>Sign-UP</button>
                 {this.state.view? <FormDialog onSubmitHandle={this.onSubmitHandle}/> :null}
                   <table>{this.state.students.map(abc => (<tr><td>{abc.id}</td><td>{abc.name}</td><td>{abc.age}</td><td>{abc.email}</td><td>
                    <button onClick={this.onDeleteHandle.bind(this, abc.id)}>Delete</button></td>
                    <button onClick={this.onEditHandle.bind(this,abc.id,abc.name,abc.age,abc.email)}>Edit</button>
                    </tr>))}</table></div>  
              }
            }

然后从子组件中获取具有四个输入字段的表单。 render（）{

     return (
        <div> 
          <Dialog  fullWidth open={this.state.view} onClose={this.handleClose.bind(this)}>
            <DialogTitle>Sign Up Provide Details</DialogTitle>
            <DialogContent>


              <DialogContentText>
                <div>    

                <form onSubmit={(e)=>this.onSubmitForm(e)}>          

             <label >ID</label>
                   <input type="number"  name="id" className="item"  />
                 <label>Name</label>
                   <input type="text" name="item" className="item"  />
                   <label>age</label>
                   <input type="number" name="xyz" className="item"  />
                   <label>email</label>
                   <input type="text" name="email" className="item"  />  
                   <button className="btn-add-item">Add</button>                 
                   <Todo/>
                    </form>
                    </div>

                </DialogContentText>

                </DialogContent>
                <DialogActions>

          <Button onClick={this.handleClose.bind(this)} color="primary">
            Cancel
          </Button>



                </DialogActions>
                </Dialog>         


          </div>

      );

  }

} 而且我试图调用onSubmitForm（），而后者又试图将四个输入字段的值传递给父组件（Todo）。

onSubmitForm(event) {
          this.props.onSubmitHandle(event.target.id.value,event.target.item.value,event.target.xyz.value,event.target.email.values);

我的问题是如上所述，我无法将值从子级传递到父级组件。任何人都可以在此问题上纠正我。

Todo.js组件：

import React, { Component } from 'react';
import './Todo.css'
import FormDialog from './FormDialog'
import Dialog from '@material-ui/core/Dialog';
import { thisExpression } from '@babel/types';

class Todo extends Component {

  state = {    edit: false, id: null,view:false,  
    students: [
      { id: 1, name: 'Wasif', age: 21, email: 'wasif@email.com' },
      { id: 2, name: 'Ali', age: 19, email: 'ali@email.com' },
      { id: 3, name: 'Saad', age: 16, email: 'saad@email.com' },
      { id: 4, name: 'Asad', age: 25, email: 'asad@email.com' },
      { id: 5, name: 'kiwi', age: 20, email: 'kiwi@email.com' }
   ], }


   onDeleteHandle() {let id = arguments[0];
    this.setState({students:this.state.students.filter(item => {if (item.id !== id)
       {return item;}})});}


  onUpdateHandle(event){
    event.preventDefault();
    this.setState({students: this.state.students.map(item => {
      if (item.id === this.state.id){
        item['id'] = event.target.updatedItem.value;        
        item['name']=event.target.updatedItem1.value;
        item['age']=event.target.updatedItem2.value;
        item['email']=event.target.updatedItem3.value;
      }return item;})})
      this.setState({edit: false});
  }

  signUpDialog(){
    this.setState({view:true})
  }         

  renderEditForm() {
    if (this.state.edit) {
    return <form onSubmit={this.onUpdateHandle.bind(this)}>
    <input type="text" name="updatedItem" className="item" defaultValue={this.state.id} />
    <input type="text" name="updatedItem1" className="item" defaultValue={this.state.name} />
    <input type="text" name="updatedItem2" className="item" defaultValue={this.state.age} />
    <input type="text" name="updatedItem3" className="item" defaultValue={this.state.email} />
    <button className="update-add-item">Update</button> 
    </form>    }  }


    onEditHandle(event) {
    this.setState({edit: true,id: arguments[0],name:arguments[1],age:arguments[2],email:arguments[3]});}


    onSubmitHandle(event) { 
      alert(event)}; 



     render() 

          {    
           return<div style={{width: "500px",background : "beige"}} >            


                 <button onClick={this.signUpDialog.bind(this)}>Sign-UP</button>
                 {this.state.view? <FormDialog details={this.onSubmitHandle}/> :null}
                   <table>{this.state.students.map(abc => (<tr><td>{abc.id}</td><td>{abc.name}</td><td>{abc.age}</td><td>{abc.email}</td><td>
                    <button onClick={this.onDeleteHandle.bind(this, abc.id)}>Delete</button></td>
                    <button onClick={this.onEditHandle.bind(this,abc.id,abc.name,abc.age,abc.email)}>Edit</button>
                    </tr>))}</table></div>  
              }
            }

              export default Todo;

还有FormDialog组件（子组件）。

import React, {Component} from 'react';
import Todo from './ToDo';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';


class FormDialog extends Component{
  constructor(props) {
    super(props);     
    this.state = {edit: false,
      view: true,
      students: [
        { id: 1, name: 'Wasif', age: 21, email: 'wasif@email.com' },
        { id: 2, name: 'Ali', age: 19, email: 'ali@email.com' },
        { id: 3, name: 'Saad', age: 16, email: 'saad@email.com' },
        { id: 4, name: 'Asad', age: 25, email: 'asad@email.com' },
        { id: 5, name: 'kiwi', age: 20, email: 'kiwi@email.com' }
     ],
    };
    this.onSubmitForm = this.onSubmitForm.bind(this);
  }
  handleClose(){
    this.setState({view:!this.state.view})
  }
  onDeleteHandle() {let id = arguments[0];
    this.setState({students:this.state.students.filter(item => {if (item.id !== id)
       {return item;}})});}


onEditHandle(event) 
{   
this.setState({edit:true,id: arguments[0],name:arguments[1],age:arguments[2],email:arguments[3]});

}
onUpdateHandle(event){
  event.preventDefault();
  this.setState({students: this.state.students.map(item => {
    if (item.id === this.state.id){
      item['id'] = event.target.updatedItem.value;        
      item['name']=event.target.updatedItem1.value;
      item['age']=event.target.updatedItem2.value;
      item['email']=event.target.updatedItem3.value;
    }return item;})})
    this.setState({edit: false});
}



  onSubmitForm(event) {    
    this.props.details(event.target.id.value)//event.target.item.value,event.target.xyz.value,event.target.email.value);

        };



      render() {

      return (
        <div> 
          <Dialog  fullWidth open={this.state.view} onClose={this.handleClose.bind(this)}>
            <DialogTitle>Sign Up Provide Details</DialogTitle>
            <DialogContent>


              <DialogContentText>
                <div>    

                <form onSubmit={(e)=>this.onSubmitForm(e)}>          

             <label >ID</label>
                   <input type="number"  name="id" className="item"  />
                 <label>Name</label>
                   <input type="text" name="item" className="item"  />
                   <label>age</label>
                   <input type="number" name="xyz" className="item"  />
                   <label>email</label>
                   <input type="text" name="email" className="item"  />  
                   <button className="btn-add-item">Add</button>                 
                   <Todo/>
                    </form>
                    </div>

                </DialogContentText>

                </DialogContent>
                <DialogActions>

          <Button onClick={this.handleClose.bind(this)} color="primary">
            Cancel
          </Button>



                </DialogActions>
                </Dialog>         


          </div>

      );

  }
}

export default FormDialog;

Answer 1

第1步：在父组件中创建一个函数，该函数将使用来自表单的新数据更新父状态，并将其作为道具传递给表单组件例如

    addStudent = formstate => {
    this.setState({ students: [...this.state.students, formstate] });
  };

step2：在表单组件中，创建一个初始状态，例如

    this.state = {
      NewStudent: {
        name: "",
        age: "",
        email: " "
      }
    };

第3步：按照表格中的说明正确处理更改。请注意，表单上的名称属性应与州名称相同

    changeHandler = event => {
    this.setState({
      NewStudent: {
        ...this.state.NewStudent,
        [event.target.name]: event.target.value
      }
    });
  };

第4步：在这样的表单组件中创建一个提交处理程序函数，该函数调用addStudent函数来更新父级中的数组

 submitHandler = event => {
    event.preventDefault();
    this.props.addStudent(this.state.NewStudent);
    this.setState({
      NewTask: {
        name: "",
        age: "",
        email: ""
      }
    })
  };

现在应该将表单组件中的新学生添加到父组件中

尝试在React js中将值从子组件传递到父组件

1 个答案: