javascript - 如何使用react js显示表格

Question

我是 reactjs 的新手，我只是想用用户名和密码创建一个页面。单击 submit 时，它应该会在同一页面中显示表名列表。为此，我有两个 react 组件，将其放在一个单独的 js 文件中。因此，当单击按钮时，应生成表名。我尝试了示例代码，但无法显示列表。所以在 reactjs 中寻求帮助。

表格内容.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;

登录.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

将名称tableContent更改为TableContent，因为react组件的名称必须以大写字母开头，否则将被视为html 元素。

在 buttonClick 函数中使用 e.preventDefault(); 来阻止自动提交表单。

检查工作代码:

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