Question

我是这个React JS的新手，请问这个问题。我有4个组件（插入，删除，更新和显示）。当我在插入组件中插入数据时，它应立即在显示组件中显示这些详细信息。请找到我的示例代码。在此先感谢您的帮助。

main.js：

import React from 'react';
import ReactDOM from 'react-dom';

import Insert from './Insert.js';
import Show from './Show.js';
import Delete from './Delete.js';
import Update from './update.js';

ReactDOM.render(<Insert/>, document.getElementById('Insert'))
ReactDOM.render(<Show />, document.getElementById('Show'))
ReactDOM.render(<Delete />, document.getElementById('Delete'))
ReactDOM.render(<Update/>, document.getElementById('Update'))

我的Index.html：

  <table border="2" align="center">
  <tr>
        <td>
              <h1> Insert New Record </h1>
               <div id = "Insert"></div>
        </td>
        <td>
              <h1> Show Existing Records </h1>
              <div id = "Show"> </div>
        </td>
  </tr>
  <tr>
        <td>
              <h1> Delete Emp Record </h1>
              <div id="Delete"> </div>
        </td>
        <td>
              <h1> Update Existing Records </h1>
              <div id="update" > </div>
        </td>
  </tr>               
  <script src = "index.js"></script>

现在，每当我执行插入，更新，删除操作时，我都需要刷新Show组件。

我的示例插入组件：

import React from 'react';         
import Fetch from 'react-fetch';
import Show from './show'
class Insert extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Id:0 ,
      name:'' ,
      mobile: '',
      email: '',
      dept : '',
      role :'',
      child : Show
    };

    this.handleSubmit = this.handleSubmit.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
  }
   handleInputChange(event) {
      const target = event.target;
      const Id= target.Id;
      const name = target.name;
      const mobile = target.mobile;
      const email = target.email;
      const dept = target.dept;
      const role = target.role;

     this.setState({[Id]: event.target.value});
     this.setState({[name]: event.target.value});
     this.setState({[mobile]: event.target.value});
     this.setState({[email]: event.target.value});
     this.setState({[dept]: event.target.value});
     this.setState({[role]: event.target.value});    
  }

  handleSubmit(event) {

  let employee={
     Id:this.state.Id,
    name:this.state.name,
    mobile:this.state.mobile,
    email:this.state.email,
    dept:this.state.dept,
    role:this.state.role
    }
     fetch('http://localhost:25424/api/Employee/CreateNewEmployee/', {
    method: "POST",
    headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin' : 'http://localhost:7777' ,
    'Access-Control-Allow-Headers'  : 'Origin, X-Requested-With, Content-Type, Accept',
    'Access-Control-Allow-Methods' : 'POST'
    },
    body: JSON.stringify(employee)
    })
    .then(function(resp){

    })
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>

        <label >ID</label>
         <input type="number" name="Id" value={this.state.Id} onChange={this.handleInputChange}  />
         <br/>
         <label >name</label>
         <input type="text" name="name" value={this.state.name} onChange={this.handleInputChange}  />
        <br/>
         <label >Mobile</label>
         <input type="text" name="mobile"  value={this.state.mobile} onChange={this.handleInputChange} />
         <br/>
         <label >Email</label>
         <input type="text" name="email" value={this.state.email} onChange={this.handleInputChange} />
        <br/>
         <label >Dept</label>
         <input type="text" name="dept" value={this.state.dept} onChange={this.handleInputChange}  />
        <br/>
         <label >Role</label>
         <input type="text" name="role" value={this.state.role} onChange={this.handleInputChange}  />
        <br/>

        <input type="submit" value="Submit"   />

      </form>

    );
  }
}

export default Insert;

Answer 1

这是您在React应用程序中需要的文件结构

- src/ - components/ - insert.js - delete.js - update.js - show.js - main.js - index.html

例如：

 main.js // should contain all the data(state) and should flow downwards to your child components
    import React, {Component} from 'react';
    import ReactDOM from 'react-dom';
    import 'insert' from /route/to/insert.js
    import 'delete' from /route/to/delete.js
    import 'show' from /route/to/show.js
    import 'update' from /route/to/update.js

    class Main extends Component {
      constructor(props) {
      super(props);
      this.state = {//initialize state object}
      }

      render() {
        return ( //jsx
           <table border="2" align="center">
           <tr>          
            <(insert.js component)/>
            <(delete.js component)/>
           </tr>
           <tr>          
            <(update.js component)/>
            <(show.js   component)/>
           </tr>
        )
      }
    }
    ReactDOM.reder(<Main/>, document.querySelector('one DOM element'))

然后......让每个单独的组件将JSX渲染到main.js

中

希望有道理：/

Answer 2

您的组件之间没有父子关系。你需要在一个父React组件中使用所有这些，比如说Main.jsx。它应该看起来像这样：

Main.jsx：

import React from 'react';         
class Main extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = {
      flag: 0,
   }
 handleSubmit(){
    this.setState({flag : this.state.flag});
 }
 render() {
 return(<div>
     <Insert handleSubmit = {this.handleSubmit}/>
     <Show/>
     <Delete/>
     <Update />
    </div>);
  }
}
export default Main

您可以根据需要在渲染中放置DOM或布局的结构。在handleSubmit函数中，再次重新分配相同的状态，以便它可以重新渲染。您也可以使用this.forceUpdate()，但在某些情况下不建议这样做。插入组件中的handleSubmit函数看起来需要将props函数调用为this.props.handleSubmit()，以便它可以重新渲染主要组件，而主要组件又会重新呈现您的节目更新和删除。

希望它有所帮助。

React JS - 如何重新呈现独立组件？

2 个答案: