ReactJS - handleTextChange

handleTextChange

Publicado por Mario (2 intervenciones) el 10/02/2022 16:54:10

Estoy mostrando estos datos en un componente de React:

<div className={`users-management`}>

{this.state.opcionCaja.descargas.map(opt => (
<>

<List.Item className={`'as-box' : 'as-list'}`} key={opt.ambitoGrab.codigo} onClick="">

<Row className={`list-item box-screen-mode`} >
<Col className="data" xs={{ span: 22 }} >
<div className="text-data">
<p className="title">{opt.ambitoGrab.valor}</p>
<p className="username">{opt.fecha}</p>
<p className="role">{opt.nombre}</p>
<p className="role">{opt.tamanio}</p>
</div>
</Col>
</Row>

</List.Item>
</>
))}

</div>

En otro componente, tengo un filtro:

<Col xs={{ span: 12 }} md={{ span: 8 }} lg={{ span: 5}} className="text-option">
<span className="field">Nombre de fichero</span> <Search placeholder="Buscar por texto" value={this.state.text} onChange={this.handleFilterText} />
</Col>

¿Cómo sería esta funcion handleFilterText para que pueda filtrar los datos por el {opt.nombre} ?

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 6

Val: 9

handleTextChange

Publicado por 7aamin (26 intervenciones) el 12/02/2022 05:53:54

Asumo que estas queriendo implementar algo como una busqueda en tiempo real...
pero bueno para filtrar haces esto:

//Asumiendo que este es el dataset que quieres filtrar

const values = ['file-1', 'basura', 'file-2', 'nada', 'codigo']

//utilizas el metodo filter() del objeto Array

//le pasas como parametro el valor que quieras filtrar

//en este caso yo estoy usando una condicion que

//me devolvera un array con los elementos que la cumplan

//esa condicion es que me devuelva los elementos que empiecen con un texto

//ese texto yo se lo paso como parametro

const handleFilterText = (val) => {

    return values.filter(item => item.startsWith(val))

//Le paso como parametro el texto "file", me devolvera todos los elementos

//que comiencen con la palabra "file"

console.log(handleFilterText('file'))

//[ 'file-1', 'file-2' ]

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar