Question

我正在制作一个创建多个按钮的反应组件，但我不知道如何根据按下哪个按钮来处理动作，这是组件：

var SingleChoiceGroup = React.createClass({
    render(){
        var numberOfButtons = this.props.numberOfButtons;
        var prefix = this.props.prefix;
        var buttons = [];

        for(var i = 0;i<numberOfButtons;i++){
            buttons.push(
                <Button value={i} onClick={() => this.props.selectedItem(i)}>{prefix + " " + (i+1)}</Button>
            );
        }

        return(
            <div>
                {buttons}
            </div>
        )
    }
});

这是我想要获取参数的方法：

var AnotherComponent = React.createClass({
    selectedDay(i){
        // Here I want to read the index parameter from the other component.
    },

    render(){
        <SingleChoiceGroup selectedItem={() => this.selectedDay()} numberOfButtons={7} prefix={"Text"}/>
    }    
});

Answer 1

在您的SingleChoiceGroup组件中，在let循环中使用var的{{1}}插件 - 否则点击处理程序将使用for的最后一个值，在您的情况下是7（为什么？有关i循环中闭包的详细说明，请参阅此SO answer：

for

Answer 2

您的代码中存在两个问题。第一个是：

<SingleChoiceGroup selectedItem={() => this.selectedDay()} numberOfButtons={7} prefix={"Text"}/>

由于您的selectedItem箭头函数不带任何参数，因此SingleChoiceGroup传递给它的i值将丢失。

您可以通过将其更改为selectedItem={i => this.selectedDay(i)}来解决此问题，但不是传递调用this.selectedDay的函数，而是可以通过this.selectedDay本身，即：

<SingleChoiceGroup selectedItem={this.selectedDay} numberOfButtons={7} prefix={"Text"}/>

第二个问题，正如Bartek在他的回答中指出的那样，i循环中的for是循环的每次迭代中对同一对象的引用，并且因为它的最终值是7，它是事件处理程序为每个按钮获取的值。对该主题进行了更广泛的讨论in this answer。 TL; DR将使用let而不是var来使for循环每次初始化一个新的块范围变量。

以下是工作代码段中的这两项更改：

＆＃13;

const Button = props => <button type="button" {...props}/>;

var SingleChoiceGroup = React.createClass({
    render(){
        var numberOfButtons = this.props.numberOfButtons;
        var prefix = this.props.prefix;
        var buttons = [];

        for (let i = 0; i < numberOfButtons; i++){
            buttons.push(
                <Button key={i} value={i} onClick={() => this.props.selectedItem(i)}>{`${prefix} ${i+1}`}</Button>
            );
        }
        
        return <div>{buttons}</div>;
    }
});

var AnotherComponent = React.createClass({
    selectedDay(i){
      console.log('clicked %d', i);
    },

    render(){
        return <SingleChoiceGroup selectedItem={this.selectedDay} numberOfButtons={7} prefix="Text"/>
    }    
});

ReactDOM.render(<AnotherComponent/>, document.getElementById('container'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Click on us: <div id="container"></div>

＆＃13;

通过反应道具传递参数方法？

2 个答案: