evitar la repetición constante de “input” o “textarea” en react js

Solución:

Bueno, así es como implementas elementos de entrada controlados en React.

Sin embargo, si el rendimiento es una preocupación importante para usted, puede aislar su elemento de entrada en un componente con estado separado, por lo tanto, solo desencadenar una nueva representación en sí mismo y no en toda su aplicación.

Entonces algo como:

class App extends Component {    
  render() {
    return (
      <div>
        ...
        <MyInput />
        ...
      </div>
    );
  }
}


class MyInput extends Component {
  constructor() {
    super();
    this.state = {value: ""};
  }

  update = (e) => {
    this.setState({value: e.target.value});
  }

  render() {
    return (
      <input onChange={this.update} value={this.state.value} />
    );
  }
}

---

Alternativamente, puede usar un elemento de entrada no controlado. Por ejemplo:

class App extends Component {    
  render() {
    return (
      <div>
        ...
        <input defaultValue="" />
        ...
      </div>
    );
  }
}

Sin embargo, tenga en cuenta que generalmente se recomiendan las entradas controladas.

Como dijo @Chris, debe crear otro componente para optimizar la reproducción solo al componente especificado.

Sin embargo, hay casos de uso en los que necesita actualizar el componente principal o enviar una acción con el valor ingresado en su entrada a uno de sus reductores.

Por ejemplo, creé un componente SearchInput que se actualiza a sí mismo para cada carácter ingresado en la entrada, pero solo llama al onChange función solamente si hay 3 caracteres como mínimo.

Nota la clearTimeout es útil para llamar al onChange función solamente cuando el usuario ha dejado de escribir durante al menos 200 ms.

import React from 'react';

class SearchInput extends React.Component {
  constructor(props) {
    super(props);
    this.tabTimeoutId = [];
    this.state = {
      value: this.props.value,
    };

    this.onChangeSearch = this.onChangeSearch.bind(this);
  }

  componentWillUpdate() {
    // If the timoutId exists, it means a timeout is being launch
    if (this.tabTimeoutId.length > 1) {
      clearTimeout(this.tabTimeoutId[this.tabTimeoutId.length - 2]);
    }
  }

  onChangeSearch(event) {
    const { value } = event.target;

    this.setState({
      value,
    });

    const timeoutId = setTimeout(() => {
      value.length >= this.props.minSearchLength ? this.props.onChange(value) : this.props.resetSearch();
      this.tabTimeoutId = [];
    }, this.props.searchDelay);

    this.tabTimeoutId.push(timeoutId);
  }

  render() {
    const {
      onChange,
      minSearchLength,
      searchDelay,
      ...otherProps,
    } = this.props;

    return <input
      {...otherProps}
      value={this.state.value}
      onChange={event => this.onChangeSearch(event)}
    />
  }
}

SearchInput.propTypes = {
  minSearchLength: React.PropTypes.number,
  searchDelay: React.PropTypes.number,
};
SearchInput.defaultProps = {
  minSearchLength: 3,
  searchDelay: 200,
};

export default SearchInput;

Espero eso ayude.

---

---

Utiliza Nuestro Buscador