如何使用react js显示表格

Question

我是reactjs的新手，我只是尝试使用用户名和密码创建页面。 单击submit ，它应在同一页面上显示表名列表。 为此，我有两个react组件，将其放在单独的js文件中。 因此，单击按钮时应生成表名称。 我尝试了一个示例代码，但无法显示该列表。 因此，在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

更改名称tableContent到TableContent ，因为反应成分的名称必须将大写字母 ，否则将被视为html元素。

使用e.preventDefault(); 内部的buttonClick功能可防止自动提交表单。

检查工作代码：

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