[英]How to show and hide components in React to implement a multiple steps form?
I am new in React.我是 React 的新手。 I want to hide and show some part of my code at the same time.我想同时隐藏和显示我的部分代码。 From my below codes, on load only the "step_one" class should visible and "step_two" class should be hidden.从我下面的代码中,加载时只有“step_one”类应该可见,“step_two”类应该被隐藏。 Once I click on SUBMIT I want to hide the "step_one" part and "step_two" part should be visible.单击提交后,我想隐藏“step_one”部分,并且“step_two”部分应该可见。 Please suggest me to achieve this.请建议我实现这一目标。 Thank you.谢谢你。
App.tsx:应用程序.tsx:
interface IState {
cName: string;
cEmail: string;
}
class App extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
cName: '',
cEmail: ''
}
this.nameChange = this.nameChange.bind(this);
this.emailChange = this.emailChange.bind(this);
this.computeBmi = this.computeBmi.bind(this);
}
nameChange(nameValue) {
this.setState({ cName : nameValue });
}
emailChange(emailValue) {
this.setState({ cEmail : emailValue });
}
computeBmi() {
// some code here
}
render() {
return (
<div>
<div class="step_one">
<TextInput label="Please confirm your full name?" placeholder="Your full name" onChange={this.nameChange} />
<TextInput label="Please confirm your email?" placeholder="Your Email ID" onChange={this.emailChange} />
<MyButton label="SUBMIT" onClick={ this.computeBmi } />
</div>
<div class="step_two">
// some code
</div>
</div>
)
}
}
export default App;
TextInput.tsx:文本输入.tsx:
interface TIProps {
label?: any;
placeholder?: any;
onChange(inputValue: string): any;
}
interface TIState {
value: number;
error: string;
}
class TextInput extends React.Component<TIProps, TIState> {
constructor(props: TIProps) {
super(props);
this.state = {
value : 0,
error : ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
let inputValue = event.target.value;
this.setState({ value : inputValue });
this.props.onChange(inputValue);
}
render() {
return(
<div>
<FormControl>
<TextField label={ this.props.label } type="text" placeholder={this.props.placeholder} onChange={this.handleChange} />
</FormControl>
</div>
)
}
}
export default TextInput;
MyButton.tsx:我的按钮.tsx:
interface BIProps {
label?: any;
variant?: any;
size?: any;
color?: any;
onClick: React.MouseEventHandler<HTMLButtonElement>;
}
interface BIState {
}
class MyButton extends React.Component<BIProps, BIState> {
render() {
return(
<button className="myButton" onClick={this.props.onClick}>
{this.props.label}
</button>
)
}
}
export default MyButton;
interface IState {
cName: string;
cEmail: string;
step: number;
}
class App extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
cName: '',
cEmail: '',
step: 1,
}
this.nameChange = this.nameChange.bind(this);
this.emailChange = this.emailChange.bind(this);
this.computeBmi = this.computeBmi.bind(this);
}
nameChange(nameValue) {
this.setState({ cName : nameValue });
}
emailChange(emailValue) {
this.setState({ cEmail : emailValue });
}
computeBmi() {
this.setState({ step: 2 });
// some code here
}
render() {
return (
<div>
{
this.state.step === 1 && <div class="step_one">
<TextInput label="Please confirm your full name?" placeholder="Your full name" onChange={this.nameChange} />
<TextInput label="Please confirm your email?" placeholder="Your Email ID" onChange={this.emailChange} />
<MyButton label="SUBMIT" onClick={ this.computeBmi } />
</div>
}
{
this.state.step === 2 && <div class="step_two">
// some code
</div>
}
</div>
)
}
}
export default App;
You also can add an additional modifier class using the syntax of template literals .您还可以使用模板文字的语法添加额外的修饰符类。 For example:例如:
className={`todo ${todo.isCompleted ? 'todo--completed' : ''}`}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.