¿Cómo pasar a una funcion de evento varios parametros en un componente React?

Teniendo declarada la funcion de esta manera:

constructor(props) {
    super(props);
    this.funcion= this.funcion.bind(this)
}

funcion(evt , num) {
    console.log("Num: ",num)
    console.log("Codigo de tecla: ",evt.keyCode)
}

Quiero realizar esta funcion de la siguiente manera en cada caso, siendo "num" una variable distinta en cada caso:

<input type="text" onKeyDown={this.funcion(this, num)}/>

De esta manera no reconoce el evento, pero si el número. Mi duda es la forma de pasarle varios parametros a una función, no solamente el parámetro por defecto.

2
задан 19.12.2016, 13:20
4 ответа

Попытайся:

onKeyDown ={that.funcion.bind(that, num)}
0
ответ дан 24.11.2019, 12:01
  • 1
    Deberí схвати объяснять немного má s твой ответ –  Joacer 19.12.2016, 13:51

Я прикрепляю тебя этот пример без JSX.

Я комментирую тебе:

this.funcion= this.funcion.bind(this)

Это мне кажется antipattern. Если ты будешь распределять метод в каждую инстанцию, лучше определи это на уровне класса для того, чтобы у всех инстанций был этот метод.

Чтобы решать твое сомнение, лучшее состоит в том, чтобы создавать метод, который возвращал бы функцию, это благодаря закрытиям, позволяет тебе перемещать различную стоимость 'номера' для неудара в лунку.

this.funcionEventHandler(Math.random())

Это возвращает тебе функцию, которая является той, кто слушает событие 'onKeyDown', но в Вашем внутреннем помещении ты можешь соглашаться на 'номер', который ты переместил его как параметр благодаря закрытиям (видеть более здесь: http://nathansjslessons.appspot.com/lesson?id=1000&lang=es).

<html>
<head>
  <meta charset="utf-8">
  <title>Input Example</title>
</head>
<body>
<h1>Input Example</h1>
<div id="container">
</div>

<!-- The core React library -->
<script src="https://unpkg.com/react@15.4.0/dist/react.js"></script>
<!-- The ReactDOM Library -->
<script src="https://unpkg.com/react-dom@15.4.0/dist/react-dom.js"></script>

<script>
  var Input = React.createClass({
    funcion(evt , num) {
      console.log("Num: ", num);
      console.log("Codigo de tecla: ", evt.keyCode);
    },
    funcionEventHandler: function (num) {
      return (evt) => {
        this.funcion(evt, num);
      }
    },
    render: function () {
      return React.DOM.input({
        onKeyDown: this.funcionEventHandler(Math.random())
      });
    }
  });

  var InputFactory = React.createFactory(Input);
  ReactDOM.render(
    InputFactory(),
    document.getElementById('container')
  );
</script>
</body>
0
ответ дан 24.11.2019, 12:01

Если ты помещаешь "this.funcion (this, номер)" ты включаешь эту функцию, сделав render компонента и в onKeyDown ты не помещаешь функцию а return функции, поэтому он не распознает это тебе.

    <input type="text" onKeyDown={this.funcion(this, num)}/>

Чтобы мочь включать функцию с onKeyDown и мочь перемещать его контент различной переменной в "номере" мы завертываем в функции (closure) "this.funcion".

Я показываю тебе какие-то способы как делать это:

Пример с arrow function:

class Input extends React.Component {
    state = {};
    constructor(props) {
        super(props);
        // Esto te sobra si utilizas arrow 
        //this.funcion= this.funcion.bind(this);
    }

    funcion(evt , num) {
        console.log("Num: ",num);
        console.log("Codigo de tecla: ",evt.keyCode);
    }
  
    render() {
        return <input type="text" onKeyDown={(e) => {this.funcion(e, Math.random())}}/>
    }
}
ReactDOM.render(<Input />,
    document.getElementById('componente')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="componente">
</div>

Если ты это делаешь без arrow function, у тебя есть, что bindearle контекст (this):

class Input extends React.Component {
state = {};
constructor(props) {
    super(props);
  //Esto te sobra si bindeas el conxtexto directamente.
   // this.funcion= this.funcion.bind(this)
}

funcion(evt, num) {
    console.log("Num: ",num);
    console.log("Codigo de tecla: ",evt.keyCode);
}

render() {
    return <input type="text" onKeyDown={(function (e) {this.funcion(e, Math.random())}).bind(this)}/>
}
}
ReactDOM.render(<Input />,
    document.getElementById('componente')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="componente">
</div>

С bind, глаз ты должен менять порядок параметров функции, также я добавил неудар в лунку, чтобы менять изменчивая номер, сохраняемый на состояние компонента:

class Input extends React.Component {
    state = {
        num: 0
    };
    constructor(props) {
        super(props);
    }

    funcion(num, evt) {
        console.log("Num: ",num);
        console.log("Codigo de tecla: ",evt.keyCode);
    }

    cambiarNum(e){
        this.setState({num: e.target.value });
    }

    render() {
        return (
            <div>
                <input type="text" placeholder="num" value={this.state.num} onChange={this.cambiarNum.bind(this)}/>
                <input type="text" onKeyDown={this.funcion.bind(this, this.state.num)}/>
            </div>
        )
    }
}
ReactDOM.render(<Input />,
    document.getElementById('componente')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="componente">
</div>

Так как я, я оставляю вам пример @noodle71 в JSX:

class Input extends React.Component {
    state = {
        num: 0
    };
    constructor(props) {
        super(props);
      this.cambiarNum = this.cambiarNum.bind(this);
    }

    funcion(evt,num) {
        console.log("Num: ",num);
        console.log("Codigo de tecla: ",evt.keyCode);
    }

    funcionEventHandler(num) {
        return (evt) => {
            this.funcion(evt, num);
        }
    }

    cambiarNum(e){
        this.setState({num: e.target.value });
    }

    render() {
        return (
            <div>
                <input type="text" placeholder="num" value={this.state.num} onChange={this.cambiarNum}/>
                <input type="text" onKeyDown={this.funcionEventHandler(this.state.num)}/>
            </div>
        )
    }
}
ReactDOM.render(<Input />,
    document.getElementById('componente')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="componente">
</div>
0
ответ дан 24.11.2019, 12:01

Ты можешь делать currying

funcion = (num, ...restoParametros) => (event)=> {
    console.log("Num: ",num)
    console.log("Codigo de tecla: ",event.keyCode)
}

<input type="text" onKeyDown={this.funcion(num)}/>
0
ответ дан 24.11.2019, 12:01

Твоя проблема - ассигнование callback в событие onKeyDown, помнит, что внутри {callback} callback - выражение не стоимость, разместив this.fumcion (this, бар) ты выполняешь функцию вместо того, чтобы посылать ссылку функции, возможно то, что ты пробуешь поместить,

onKeyDown={this.funcion.bind(this, valor)}

Однако в функции ты нуждаешься в том, чтобы согласиться на событие в этом случае можешь делать следующее

onKeyDown={(evt) => this.funcion(evt, valor)}

Bind возвращает функцию, внутри которой он распределяет первый параметр, который ты посылаешь во внутреннюю переменную 'this', по этой причине действительно объявлять callback таким образом с bind, так как он возвращает ту же функцию, он не выполняет ее во втором случае равного способа, когда оператор использует arrow, я размещаю выражение в этом случае это функция inline, что использовал ее как посредница, чтобы захватывать объект event и в свою очередь посылать этот объект в функцию

1
ответ дан 03.12.2019, 18:28

Теги

Похожие вопросы