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

我的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

您的組件之間沒有父子關系。 假設Main.jsx是一個父React組件，就需要所有這些。 它應該看起來像這樣：

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函數中，m再次重新分配相同的狀態，以便可以重新呈現。 您也可以this.forceUpdate()使用this.forceUpdate() ，但在某些情況下不建議這樣做。 您在Insert Component中的handleSubmit函數看起來需要調用props函數，例如this.props.handleSubmit()以便它可以重新呈現主要組件，從而又可以呈現您的表演更新和刪除。

希望能幫助到你。