[英]how to display the table using react js
Im new to reactjs and Im just trying to create a page with the userName and password. 我是reactjs的新手,我只是尝试使用用户名和密码创建页面。 When the submit
is clicked it should display a list of table names in the same page. 单击submit
,它应在同一页面上显示表名列表。 For this I have two react components, placed it in a separate js file. 为此,我有两个react组件,将其放在单独的js文件中。 So when the button is clicked the table names should be generated. 因此,单击按钮时应生成表名称。 I have tried a sample code but I'm unable to display the list. 我尝试了一个示例代码,但无法显示该列表。 So looking for help in reactjs. 因此,在reactjs中寻求帮助。
tableContent.js 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 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;
Change the Name tableContent
to TableContent
, because name of the react component must start will upper case letter otherwise it will be treated as html
element. 更改名称tableContent
到TableContent
,因为反应成分的名称必须将大写字母 ,否则将被视为html
元素。
Use e.preventDefault();
使用e.preventDefault();
inside buttonClick
function to prevent the form submission automatically. 内部的buttonClick
功能可防止自动提交表单。
Check the working code: 检查工作代码:
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'/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.