ejemplo - onclick javascript href

Reacciona la función onClick dispara en render

Question

Le paso 2 valores a un componente hijo:

1. Lista de objetos para mostrar
2. Eliminar función.

Utilizo una función .map () para mostrar mi lista de objetos (como en el ejemplo dado en la página de tutorial de reacción), pero el botón en ese componente onClick función onClick , en el render (no debería activarse en el tiempo de render). Mi código se ve así:

module.exports = React.createClass({
    render: function(){
        var taskNodes = this.props.todoTasks.map(function(todo){
            return (
                <div>
                    {todo.task}
                    <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
                </div>
            );
        }, this);
        return (
            <div className="todo-task-list">
                {taskNodes}
            </div>
        );
    }
});

Mi pregunta es: ¿Por qué la función onClick en el render y cómo hacer que no lo haga?

Answer 1

Debido a que está llamando a esa función en lugar de pasar la función a onClick, cambie esa línea a esto:

<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>

=> llamado Función de flecha, que se introdujo en ES6, y será compatible con React 0.13.3 o superior.

Answer 2

El valor de su atributo onClick debe ser una función, no una llamada a función.

<button type="submit" onClick={function(){removeTaskFunction(todo)}}>Submit</button>

Answer 3

En lugar de llamar a la función, vincule el valor a la función:

this.props.removeTaskFunction.bind(this, todo)

Referencia de MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Answer 4

JSX evaluará las expresiones de JavaScript en llaves

En este caso, se this.props.removeTaskFunction(todo) y el valor de retorno se asigna a onClick

Lo que debe proporcionar para onClick es una función. Para hacer esto, puede ajustar el valor en una función anónima.

export const samepleComponent = ({todoTasks, removeTaskFunction}) => {
    const taskNodes = todoTasks.map(todo => (
                <div>
                    {todo.task}
                    <button type="submit" onClick={() => removeTaskFunction(todo)}>Submit</button>
                </div>
            );
    return (
        <div className="todo-task-list">
            {taskNodes}
        </div>
        );
    }
});

Answer 5

JSX se usa con ReactJS ya que es muy similar al HTML y les da a los programadores la sensación de usar HTML, mientras que finalmente se transpira a un archivo javascript.

Escribir una función for-loop y especificar como {this.props.removeTaskFunction (todo)} ejecutará las funciones siempre que se active el bucle.

Para detener este comportamiento, necesitamos devolver la función a onClick.

La función de flecha gruesa tiene una declaración de retorno oculta junto con la propiedad de vinculación . ¡Por lo tanto, devuelve la función a OnClick ya que Javascript también puede devolver funciones !

Utilizar -

onClick={() => { this.props.removeTaskFunction(todo) }}

lo que significa-

var onClick = function() {
  return this.props.removeTaskFunction(todo);
}.bind(this);

Answer 6

Para aquellos que no usan funciones de flecha pero algo más simple ... Encontré esto al agregar paréntesis después de mi función signOut ...

reemplace este <a onClick={props.signOut()}>Log Out</a>

con este <a onClick={props.signOut}>Log Out</a> ...! 😆