wie die Tabelle mit react js anzuzeigen

Question

Ich bin neu zu reactjs und ich versuche nur, eine Seite mit dem Benutzernamen und dem Passwort zu erstellen. Wenn auf submit geklickt wird, sollte eine Liste von Tabellennamen auf derselben Seite angezeigt werden. Dazu habe ich zwei react-Komponenten, die ich in eine separate js-Datei lege. Wenn also auf die Schaltfläche geklickt wird, sollten die Tabellennamen generiert werden. Ich habe einen Beispielcode ausprobiert, kann die Liste jedoch nicht anzeigen. Also suche Hilfe in reactjs.

tableContent.js

import React from 'react'; 

class tableContent extends React.Component { 
    render() { 
     return (
      <select name="sometext" multiple="multiple"> 
       <option>Table1</option> 
       <option>Table2</option> 
       <option>Table3</option> 
       <option>Table4</option> 
       <option>Table5</option> 
      </select> 

     ) 
    } 
} 

export default tableContent; 

login.js

import React from 'react'; 
import tableContent from './tables'; 
class Login extends React.Component{ 
    constructor(){ 
     super(); 
     this.state={ 
      showComponent : false, 
     }; 
     this.buttonClick = this.buttonClick.bind(this); 
    } 

    buttonClick(){ 
     this.setState({ 
      showComponent: true, 
     }) 
    } 
    render(){ 
     return(
      <div> 
       <form> 
        <label>userName :</label> 
        <input type="text" /> 
        <br/> 
        <label>Password :</label> 
        <input type="text" /> 
        <button onClick={this.buttonClick.bind(this)}> Submit </button> 
        </form> 
        <tableContent /> 
      </div> 
     ) 
    } 
} 

export default Login; 

Answer 1

Ändern Sie den Namen tableContent-TableContent, weil Namen der Komponente reagieren muss Großbuchstaben beginnen sonst wird es behandelt werden als html Element.

Verwenden Sie e.preventDefault(); innerhalb buttonClick Funktion, um die Formularübergabe automatisch zu verhindern.

Überprüfen Sie den Arbeitscode:

class Login extends React.Component{ 
 
    constructor(){ 
 
     super(); 
 
     this.state={ 
 
      showComponent : false, 
 
     }; 
 
    } 
 

 
    buttonClick(e){ 
 
     e.preventDefault(); 
 
     this.setState({ 
 
      showComponent: true, 
 
     }) 
 
    } 
 
    render(){ 
 
     return(
 
      <div> 
 
       <form> 
 
        <label>userName :</label> 
 
        <input type="text" /> 
 
        <br/> 
 
        <label>Password :</label> 
 
        <input type="text" /> 
 
        <button onClick={this.buttonClick.bind(this)}> Submit </button> 
 
        </form> 
 
        {this.state.showComponent && <TableContent />} 
 
      </div> 
 
     ) 
 
    } 
 
} 
 
class TableContent extends React.Component { 
 
    render() { 
 
     return (
 
      <select name="sometext" multiple="multiple"> 
 
       <option>Table1</option> 
 
       <option>Table2</option> 
 
       <option>Table3</option> 
 
       <option>Table4</option> 
 
       <option>Table5</option> 
 
      </select> 
 

 
     ) 
 
    } 
 
} 
 

 
ReactDOM.render(<Login/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id ='app'/>