javascript 如何在React中显示和隐藏组件以实现多步骤表单？

cetgtptt 于 2023-05-05 发布在 Java

关注(0)|答案(3)|浏览(172)

我是React的新手。我想同时隐藏和显示代码的某些部分。从我下面的代码中，在加载时只有“step_one”类应该是可见的，而“step_two”类应该是隐藏的。一旦我点击SUBMIT，我想隐藏“step_one”部分，“step_two”部分应该是可见的。请建议我实现这一点。谢谢大家。

App.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：

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：

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;

JavaScript

来源：https://stackoverflow.com/questions/72690567/how-to-show-and-hide-components-in-react-to-implement-a-multiple-steps-form

3条答案

按热度按时间

gzjq41n41#

这可能会解决您的问题

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;

赞(0）回复(0）举报 2023-05-05

camsedfj2#

您可以在props中使用step属性，并使用条件渲染，如下所示：

interface IState {
  cName: string;
  cEmail: string;
  step: 1 | 2;
}
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(e) {
    e.preventDefault();
    // some code here
    this.setState({ ...this.state, step: 2 });
  }

  render() {
    return (
      <div>
        {this.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.step == 2 && <div class="step_two">// some code</div>}
      </div>
    );
  }
}

export default App;

赞(0）回复(0）举报 2023-05-05

rryofs0p3#

还可以使用template literals语法添加额外的修饰符类。例如：

className={`todo ${todo.isCompleted ? 'todo--completed' : ''}`}

赞(0）回复(0）举报 2023-05-05

我来回答

javascript 如何在React中显示和隐藏组件以实现多步骤表单？

3条答案

这可能会解决您的问题

相关问题

热门标签

最新问答