Question

我有一个问题，你如何在这种特殊情况下隐藏一个元素。

我需要在<p>{this.state.result}</p>没有this.state.value

时隐藏length

let people = [
    'Messi',
    'JStar',
    'Cole',
    'Jorge'
  ];

class UniversalSearch extends Component {

  constructor() {
    super();
    this.state = {value : '', result: ''};
  } 

  render () {
    return (

       <TextField onChange={this._onChange.bind(this)}
                  onKeyUp={this._changeInput.bind(this)}
                  value={this.state.value} />

       <p>{this.state.result}</p> //NEED TO HIDE IT

    );
  }

  _matchPeople = (input) => {
    let reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
    return people.map(function(person) {
      if (person.match(reg)) {
        return person;
      }
    });
  }

  _changeInput = (val) => {
    let autoCompleteResult = this._matchPeople(this.state.value);
    this.setState({result: autoCompleteResult.join(' ')});

  }

  _onChange = (event) => {
    this.setState({value: event.target.value});
  }  

}

我需要从onChange执行此操作，还是可以从render方法执行此操作？当我尝试使用render方法时，我遇到了错误

我这样做了

        if (this.state.value.length) {
          <p style={searchOutput}>{this.state.result}</p>
        }

错误

Module build failed: SyntaxError: /home/mretana/Documents/Projects/application-backoffice/app/components/pages/UniversalSearch/index.js: Unexpected token (47:17)
  45 |                     onKeyUp={this._changeInput.bind(this)} value={this.state.value} />
  46 |             {(this.state.value)
> 47 |               <p style={searchOutput}>{this.state.result}</p>
     |                  ^
  48 |             }

Answer 1

您无法从函数返回两个值，因此必须将它们包装在元素中。我在下面使用div。
{condition && el}是一种有条不紊地显示元素的好方法，正如False in JSX文档所示。

render: function () {
    return <div>
       <TextField onChange={this._onChange.bind(this)}
                  onKeyUp={this._changeInput.bind(this)}
                  value={this.state.value} />
       {!!this.state.value.length &&
           <p>{this.state.result}</p>}
    </div>;
}

隐藏Reactjs上的元素

1 个答案: