Question

我有一个显示不同选项的下拉列表如下：

购买x和y和z保存m
购买for m m

我想要做的是，如果我选择选项1，那么我想为 x ， y 和 z 显示3个文本字段或如果我选择选项2，我想为 n 和 m 显示两个文本字段，以便用户可以使用他们想要的值填充它们。

这是代码的一部分，我有一个函数在下拉列表和render方法中进行验证，现在我显示四个Textfields，最后一个只显示一个标签作为示例。

  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>
    );
  }

如果我需要为每个选项创建特定的组件，那么我没有做到这一点的方法是什么，所以一些帮助和指导会很棒。

Answer 1

你可以在下面这样做。检查您的州值并使用＆amp;＆amp;运算符来渲染文本字段。

    {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特别是三元运算符中的两个运算符。希望这能回答你的问题。

根据用户选择显示材料ui TextField

1 个答案: