javascript - React JS - 如何重新渲染独立组件？

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'))

我的索引.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/
- 成分/
- 插入.js
- 删除.js
- 更新.js
- 显示.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

希望这是有道理的:/