Reactjs 通过react道具传递参数的方法？

我正在制作一个react组件，该组件创建多个按钮，但我不知道如何根据按下的按钮处理该操作，这是组件：

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 SingleChoiceGroup=React.createClass({
render（）{
var numberOfButtons=this.props.numberOfButtons；
var prefix=this.props.prefix；
var按钮=[]；
对于（var i=0；i{prefix++（i+1）}
);
}
返回(
{按钮}
)
}
});

这就是我想要得到参数的方法：

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"}/>
    }    
});

var AnotherComponent=React.createClass({
选定日期（i）{
//这里我想从另一个组件读取索引参数。
},
render（）{
this.selectedDay（）}numberOfButtons={7}前缀={“Text”}/>
}    
});

您的代码中有两个问题。第一点是：

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

第二个问题，正如Bartek在他的回答中指出的那样，是我们的

for

循环中的

i

是循环每次迭代中对同一对象的引用，因为它的最终值是

7

，这是事件处理程序为每个按钮获得的值。关于这个话题有更广泛的讨论。TL；DR将使用

let

而不是

var

使

for

循环每次初始化一个新的块范围变量

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

const按钮=props=>；
var SingleChoiceGroup=React.createClass({
render（）{
var numberOfButtons=this.props.numberOfButtons；
var prefix=this.props.prefix；
var按钮=[]；
for（设i=0；i{${prefix}${i+1}}
);
}
返回{按钮}；
}
});
var AnotherComponent=React.createClass({
选定日期（i）{
console.log（'单击了%d'，i）；
},
render（）{
返回
}    
});
ReactDOM.render（，document.getElementById（'container'））

单击我们：
您的代码中有两个问题。第一点是：

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

第二个问题，正如Bartek在他的回答中指出的那样，是我们的
for
循环中的
i
是循环每次迭代中对同一对象的引用，因为它的最终值是
7
，这是事件处理程序为每个按钮获得的值。关于这个话题有更广泛的讨论。TL；DR将使用
let
而不是
var
使
for
循环每次初始化一个新的块范围变量

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


const按钮=props=>；
var SingleChoiceGroup=React.createClass({
render（）{
var numberOfButtons=this.props.numberOfButtons；
var prefix=this.props.prefix；
var按钮=[]；
for（设i=0；i{${prefix}${i+1}}
);
}
返回{按钮}；
}
});
var AnotherComponent=React.createClass({
选定日期（i）{
console.log（'单击了%d'，i）；
},
render（）{
返回
}    
});
ReactDOM.render（，document.getElementById（'container'））

单击我们：
在您的SingleChoiceGroup组件中使用
让
在
中插入
var
用于
循环-否则，单击处理程序将使用
i
的最后一个值，在您的情况下，该值为7（为什么？有关
中用于
循环的闭包的详细说明，请参阅此）：

for（设i=0；i{prefix++（i+1）}
);
}
在您的SingleChoiceGroup组件中，为
循环使用
让
在
中插入
var
-否则，单击处理程序将使用
i
的最后一个值，在您的情况下为7（为什么？请参阅此了解
中有关
循环的闭包的详细说明）：

for（设i=0；i{prefix++（i+1）}
);
}
很抱歉，我还没有反应过来，“绑定某物”的确切含义是什么，我已经尝试了
selectedItem={this.selectedDay}
但是我总是在
selectedDay
方法中得到相同的值（7）
我已经解决了您提到的问题，并用一个工作片段更新了我的答案。“Bind”不是React中的术语，而是JavaScript中的术语。这里解释了你（可能）需要使用它的原因：（向下滚动到“你必须小心……”开头的段落）谢谢，现在我理解了
var
和
let
之间的区别，对不起，我还没有反应过来，“bind something”到底意味着什么，我已经尝试了
selectedItem={this.selectedDay}
但是我总是在
selectedDay
方法中得到相同的值（7）。我已经解决了您提到的问题，并用一个工作片段更新了我的答案。“Bind”不是React中的术语，而是JavaScript中的术语。这里解释了您（可能）需要使用它的原因：（向下滚动到“您必须小心…”开头的段落）谢谢，现在我了解了
var
和
let
之间的区别
 for(let i = 0;i<numberOfButtons;i++){
        buttons.push(
            <Button value={i} onClick={() => this.props.selectedItem(i)}>{prefix + " " + (i+1)}</Button>
        );
    }