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 JSX elements no henetworkinga properties de estilo 'id'
  • Obtener altura de window / window en ReactJS
  • Problemas que requieren demasiadas imágenes en React Native
  • Cómo escribir un RelayContainer exportado
  • ¿Cómo puedo importar styles de CSS específicos del componente en React?
  • ¿Cómo agrupar los activos de Webpack en varias páginas que no se vinculan con todos los demás activos?
  • ¿Cómo enlazar correctamente onChange callback a 'this' con ReactJS, Redux y ES2015?
  • React Router v4.0 - Redirigir a una página fuera del scope de Router
  • ¿Cuál es la forma correcta de vincular touchstart en React JS?
  • ¿Cómo usar Select2 con Reactjs?
  • ReactJS cuando se usa el atributo HTML marcado, reactjs no permite seleccionar la checkbox
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.