Si pones "this.funcion(this, num)" estas activando esa función al hacer el render del componente y en el onKeyDown no estas metiendo la función sino el return de la función, por eso no te lo reconoce.
<input type="text" onKeyDown={this.funcion(this, num)}/>Para poder activar la función con el onKeyDown y poder pasarle un contenido de la variable diferente en "num" envolvemos en una función (closure) "this.funcion".
Te muestro algunas maneras de como hacerlo:
Ejemplo con 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>Si lo haces sin arrow function tienes que bindearle el contexto (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>Con bind, ojo tienes que cambiar el orden de los parámetros de la función, también he añadido un input para cambiar la variable num guardada en el estado del componente:
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>Ya que estoy os dejo el ejemplo de @noodle71 en 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>