Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

198
Visualizações
React syncfusion Query doesn't execute as expected

I'm trying to modify this code for filtering a listview's contents.

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.list = [
      {text: 'Hennessey Venom', id: 'list-01'},
      {text: 'Bugatti Chiron', id: 'list-02'},
      {text: 'Bugatti Veyron Super Sport', id: 'list-03'},
      {text: 'SSC Ultimate Aero', id: 'list-04'},
      {text: 'Koenigsegg CCR', id: 'list-05'},
      {text: 'McLaren F1', id: 'list-06'},
    ];
    this.fields = {text: 'text', id: 'id'};
    this.state = {listData: this.list};
  }
  onKeyUp(e) {
    let value = e.target.value;
    const re = /^([\w\d]*)\s*(==|!=)\s*([\w\d]*)$/i;

    let matches = value.match(re);
    let data;
    if (matches) {
      let key = matches[1];
      let op = matches[2];
      let search_value = matches[3];
      // doesn't return anything
      data = new DataManager(this.state.listData).executeLocal(
        new Query().search({searchKey: search_value, fieldNames: ['text'], operator: op}),
      );
      // original example code, doesn't return anything when run in this branch,
      // despite working below in the other branch.
      // data = new DataManager(this.state.listData).executeLocal(
      //   new Query().where('text', 'contains', value, true),
      // );
    } else {
      // the original example, works as expected in this branch
      data = new DataManager(this.state.listData).executeLocal(new Query().where('text', 'contains', value, true));
    }

    if (!value) {
      this.setState({
        listData: this.list,
      });
    } else {
      this.setState({
        listData: data,
      });
    }
  }
  render() {
    return (
      <div id='sample'>
        <input
          className='e-input'
          type='text'
          id='textbox'
          placeholder='Filter'
          onKeyUp={this.onKeyUp.bind(this)}
          title='Type in a name'
        />
        <ListViewComponent id='list' dataSource={this.state.listData} fields={this.fields} sortOrder='Ascending' />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('element'));

When it uses the else branch, the code runs as expected. But when I enter text == bug for example, in the box, the top branch runs but bothg the new Query and the original Query return empty arrays. I'm unsure why this is, even with the same exact Query as the else branch (shown as commented out).

I know that the regex is working correctly, as I logged the values of key, op, and search_value and they are correct.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda