Question

我对reactjs是新手，我只是想尝试使用userName和密码创建一个页面。单击submit时，它应在同一页面中显示表名列表。为此我有两个反应组件，将它放在一个单独的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'/>

如何使用react js显示表

1 个答案: