根據用戶選擇顯示材料ui TextField

Question

我有一個下拉菜單，顯示以下不同選項：

1. 購買x和y和z節省m
2. 買m

我想做的是，如果我選擇選項1，那么我想為x ， y和z顯示3個文本字段，或者如果我選擇選項2，我想為n和m顯示兩個Textfield，以便用戶可以用值填充它們他們要。

這是代碼的一部分，其中我具有在下拉菜單和render方法中執行驗證的功能，現在我顯示四個Textfield，最后一個僅顯示標簽為例。

  displayOfferTypeExample() {
    const value = {
      offer_example: ''
    };
    if (this.state.OfferTypeState === 'BUY x AND y AND z SAVE m') {
      value.offer_example = 'Buy ASDA Lemonade and ASDA Tea and save 5';
      console.log('OK');
    }
    if (this.state.OfferTypeState === 'BUY n SAVE m') {
      value.offer_example = 'Buy 2 for 1';
      console.log('OK');
    }

    return value;
  }

  render() {

    return (
      <div className={cr.container}>
        <div className ={cr.boton}>
          <Divider/>
          <br/>
        </div>
          <div>
            <DropDownMenu
              value={this.state.OfferTypeState}
              onChange={this.handleChangeOfferType}>
              <MenuItem value={''} primaryText={'Select offer type'} />
              {this.renderOfferTypeOptions()}
            </DropDownMenu>
          </div>
          <br/>
        <div>
          <div>
            <TextField
              onChange={(e) => {this.setState({buy_: e.target.value});}}
              value={this.state.buy_}
              errorText={this.state.buy_error}
              floatingLabelText="Buy"
            />
          </div>
          <div>
            <TextField
              onChange={(e) => {this.setState({and_: e.target.value});}}
              value={this.state.and_}
              errorText={this.state.and_error}
              floatingLabelText="And"
            />
          </div>
          <div>
            <TextField
              onChange={(e) => {this.setState({and_: e.target.value});}}
              value={this.state.and_}
              errorText={this.state.and_error}
              floatingLabelText="And"
            />
          </div>
          <div>
            <TextField
              onChange={(e) => {this.setState({save_: e.target.value});}}
              value={this.state.save_}
              errorText={this.state.save_error}
              floatingLabelText="Save"
            />
          </div>
          <div>
            <TextField
              disabled={true}
              hintText="Disabled Hint Text"
              value= {this.displayOfferTypeExample().offer_example}
              floatingLabelText="Example"
              multiLine={true}

            />
          </div>
        </div>
      </div>
    );
  }

如果要為每個選項創建特定的組件，那么我沒有什么bes方法可以使用，因此一些幫助和指南將非常有用。

Answer 1

您可以像下面這樣。 檢查您的狀態值，並使用&&運算符呈現文本字段。

    {this.state.OfferTypeState === 'BUY x AND y AND z SAVE m' && (
      <div>
        <div>
          <TextField
            onChange={(e) => {this.setState({buy_: e.target.value});}}
            value={this.state.buy_}
            errorText={this.state.buy_error}
            floatingLabelText="Buy"
          />
        </div>
        <div>
          <TextField
            onChange={(e) => {this.setState({and_: e.target.value});}}
            value={this.state.and_}
            errorText={this.state.and_error}
            floatingLabelText="And"
          />
        </div>
        <div>
          <TextField
            onChange={(e) => {this.setState({and_: e.target.value});}}
            value={this.state.and_}
            errorText={this.state.and_error}
            floatingLabelText="And"
          />
        </div>
      </div>)}
     {this.state.OfferTypeState === 'BUY n SAVE m' && (
      <div>
        <div>
          <TextField
            onChange={(e) => {this.setState({save_: e.target.value});}}
            value={this.state.save_}
            errorText={this.state.save_error}
            floatingLabelText="Save"
          />
        </div>
        <div>
          <TextField
            disabled={true}
            hintText="Disabled Hint Text"
            value= {this.displayOfferTypeExample().offer_example}
            floatingLabelText="Example"
            multiLine={true}

          />
        </div>
        </div>)}

您還可以使用如下三元運算符

{this.state.OfferTypeState === 'BUY x AND y AND z SAVE m' ? (
      <div>
        <div>
          <TextField
            onChange={(e) => {this.setState({buy_: e.target.value});}}
            value={this.state.buy_}
            errorText={this.state.buy_error}
            floatingLabelText="Buy"
          />
        </div>
        <div>
          <TextField
            onChange={(e) => {this.setState({and_: e.target.value});}}
            value={this.state.and_}
            errorText={this.state.and_error}
            floatingLabelText="And"
          />
        </div>
        <div>
          <TextField
            onChange={(e) => {this.setState({and_: e.target.value});}}
            value={this.state.and_}
            errorText={this.state.and_error}
            floatingLabelText="And"
          />
        </div>
      </div>)
     : (
      <div>
        <div>
          <TextField
            onChange={(e) => {this.setState({save_: e.target.value});}}
            value={this.state.save_}
            errorText={this.state.save_error}
            floatingLabelText="Save"
          />
        </div>
        <div>
          <TextField
            disabled={true}
            hintText="Disabled Hint Text"
            value= {this.displayOfferTypeExample().offer_example}
            floatingLabelText="Example"
            multiLine={true}

          />
        </div>
        </div>)}

您將在React特別是三元運算符中最多使用兩個以上的運算符。 希望這能回答您的問題。