Un solo manejador en múltiples escuchas al reactjsr

Intentamos utilizar es6 para generar un estado dynamic sin varios manejadores, pero estoy atascado. No tengo ni idea de lo que está mal con mi código de abajo

Mon
Tue
.. .. handleAdvancePrice = (e) => { let dow = e.target.name.split('_')[0], type = e.target.name.split('_')[1], value = +(e.target.value); console.log(dow, type) // it print correctly this.setState = ({ [`advancePrice_${dow}_${type}`]: value }) } showStates = () => { console.log(this.state) //error this.setState is not a function, caused by handleAdvancePrice }

He comprobado mi otra función, handleAdvancePrice es el culpable, pero ¿qué tiene de malo?

3 Solutions collect form web for “Un solo manejador en múltiples escuchas al reactjsr”

el culpable es el signo = extra después de this.setState . Además, no es necesario usar type and dow separado, ya que está disponible para usted directamente con e.target.name

 class App extends React.Component { constructor() { super(); this.state = {} } handleAdvancePrice = (e) => { let dow = e.target.name; let value = e.target.value; this.setState ({ [`advancePrice_${dow}`]: value }) } showStates = () => { console.log(this.state) //error this.setState is not a function, caused by handleAdvancePrice } render() { return ( 
Mon
Tue
) } } ReactDOM.render(, document.getElementById('app'));
   

Creo que no estás vinculando el contexto adecuado a tu función handleAdvancePrice .

Si está creando su componente utilizando la clase ES6, entonces puede enlazar el contexto a todas sus funciones en el constructor de esta manera:

 constructor() { this.handleAdvancePrice = this.handleAdvancePrice.bind(this); } 

En su caso, la delegación de eventos debería ayudar. En lugar de enlazar varios controladores de eventos para cada entrada, enlace uno en el contenedor principal común:

 
Mon
Tue

Ahora en handleAdvancePrice puede verificar el objective del evento adecuado, debe ser elementos de entrada, es decir, e.target.tagName === 'INPUT' , y continuar en este caso. Pero si no tiene otros elementos de formulario dentro de este contenedor, ni siquiera necesita esta comprobación, porque el evento onChange solo puede originarse a partir de elementos de formulario y si solo tiene entradas, está bien y el handleAdvancePrice permanece intacto.

  • React / Redux + Soundcloud API
  • estructura de una aplicación de página única Backbone y React
  • Componente de reacción con llamada ajax - ciclo de vida
  • React.js: ¿Es posible convertir un componente de reacción a HTML DOM?
  • Autorrelleno de tarjeta de crédito de Chrome no se activa
  • ReactJS: ¿Cómo puedo tener un uso más modular de types y forms de utilería para objects?
  • La import / export de ES6 no se comporta como se esperaba
  • Bucle this.props.children ¿cómo puedo probar su tipo?
  • REACT - alternar class onclick
  • React.js - componentWillReceiveProps siendo golpeado dos veces
  • Redux + ImmutableJS: ¿cómo recoger basura en una tienda demasiado grande?
  • Escritura de un plugin Javascript embedded con React & Webpack
  • Rendimiento al resaltar elemento en la list con Reaccionar
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.