javascript - 如何将 Prop 传递给事件处理程序

Question

• 我想将自定义 Prop 传递给 onClick 处理程序。
• 我无法返回如下内联函数，因为我稍后必须将 redux 操作创建器作为处理程序的一部分触发(不允许异步操作)

onClick={()=>this.handleClick("v")}

• 使用中间件对我来说似乎有些过分了..
• 为了简单起见，请忽略 redux 部分。只是说我们不能像这样使用内联箭头函数。

下面的示例代码只是我从 input 组件借用的 POC 方法，其中 value 是继承的 props。我对任何 Prop 都满意(正如我所说的“自定义”)

class Test extends React.Component {
    handleClick = (event) => {
        console.log(event.target.value);

    }

    render() {
        return (
            <div>
                <label
                    value="v" 
                    onClick={this.handleClick}
                >
                    TEST Label
                </label>
            </div>
        )

}

我希望控制台日志输出自定义值——“v”

Answer 1

你的选择真的很有限。您应该使用内联箭头函数并以其他方式处理异步任何问题，或者您应该找到一种方法来使状态更新为标签值的当前值。如果它是一个输入 onChange = {this.handleChange} 就会这样做。这样你的代码将如下所示:

handleClick(){
    const {value} = this.state;
    doSomething(value)
}
updateValue(input){
/*    this.setState({
        value : input
    })*/
    //in your case :
    this.setState({
        value : 'v'
    })
}
render(){
    return(
        <label 
            value= {this.state.value}
            onClick={this.handleClick}
        >Text</label>
    )
}

希望这有帮助