Question

我想将自定义道具传递给onClick处理程序。
我无法返回如下内联函数，因为稍后我将不得不触发redux操作创建者作为处理程序的一部分（不允许执行异步操作）

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

使用中间件对我来说似乎是一个过大的杀伤力。.
为简单起见，请忽略redux部分。只是说我们不能使用这样的嵌入式箭头功能。

下面的示例代码只是我从input组件中借用的POC方法，其中value是继承的道具。我对任何道具都同意（如我所说的“习惯”）

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

使用 mapDispatchToProps 将操作传递给组件，并像上面一样调用它。

import React from "react";

import { action1 } from "./actions";

const App = ({action1})=> (
  <button onClick={()=>action1("one")}>Click Me</button>
  );

export default connect(null, {action1})(App);

Answer 2

您的选择确实很有限。您应该使用内联箭头功能并以其他某种方式处理任何问题，或者应该找到一种方法来用标签值的当前值更新状态。如果它是输入，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>
    )
}

希望这会有所帮助

如何将道具传递给事件处理程序

2 个答案: