onClick=“this.func“函数进行传值之间的区别

首先需要记住一句话

必须将一个函数交给onClick作为回调

 

如果是下面这种形式，那么表示save方法作为onClick函数的回调

export default class Home extends Component {
    save = (event) =>{
        console.log(event.target.value)
    }

    render () {
		return (
			<div>
				<input onChange={this.save} type="text"/>
			</div>
		)
    }
}

     如果是下面这种形式，那么表示把save方法的返回值作为onClick函数的回调，注意，save方法只是执行了一段代码段，并没有设置返回值，那么默认返回undefined。当实际在Input中进行输入的时候，会发现onChange执行的回调是undefined，也就不会调用目标save函数。

export default class Home extends Component {
    save = (event) =>{
        console.log(event.target.value)
    }

    render () {
		return (
			<div>
				<input onChange={this.save(123)} type="text"/>
			</div>
		)
    }
}

解决办法有两种：

一：既然函数值返回是undefined，那么就让这个函数返回一个函数，让onClick成功收到回调。

当input进行输入的时候，实际上真正执行的回调是return里的函数，因此onClick为函数默认添加的参数event也应该放在return的函数上，不在save的形参上。最终save构成一个高阶函数。

 save = (data) =>{
    console.log(data)    // 输出： 123
    return (event) =>{
        console.log(event.target.value)    // 输出： 获取输入内容
    }
 }

二：onClick需要一个函数，那么我就当场给一个函数。

<input onChange={(event) => this.save(event)} type="text"/>

 

最后介绍一个Js基础的扩展，与本文无关，记录今天忘掉的一个点。

let a = 'name'
let obj = {}

// 目标： 如果想之后输出obj为 { name: 'tom' }

obj.a = 'tom'    // x { a: 'tom' }

obj[a]= 'tom'    // √ { name: 'tom' }