如何在React中顯示和隱藏組件以實作多步驟表單？

我是 React 的新手。我想同時隱藏和顯示我的部分代碼。從我下面的代碼中，加載時只有“step_one”類應該可見，“step_two”類應該被隱藏。單擊提交后，我想隱藏“step_one”部分，并且“step_two”部分應該可見。請建議我實作這一目標。謝謝你。

應用程式.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;

文本輸入.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;

我的按鈕.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;

uj5u.com熱心網友回復：

這可能會解決您的問題

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;

uj5u.com熱心網友回復：

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

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;

uj5u.com熱心網友回復：

您還可以使用模板文字的語法添加額外的修飾符類。例如：

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

標籤：javascript 反应 材料-ui 材料设计

上一篇：了解系結方法。參考與價值

下一篇：如何從前端上傳檔案并使用fs和express將其發布到本地檔案夾中