Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

201
Vistas
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 la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda