如何绑定 btn REACT 的值？

Question

我不明白为什么我的价值是data[i].Country不应该的最后一个价值。

for (var i = data.length - 1; i >= 0; i--) {

        var test = data[i].Country

        // All good \/

        console.log(test);

        const option = (

                                                           // here is the bug \/                                               

            <button className="btn" value={i} onClick={() => this.dataHandle(test)} >{test}</button>

        );

}

中间还不错{test}。>{test}</button>第一个console.log(test)很好。只有on in() => this.dataHandle(test)不起作用。

dataHandle (country) {

    console.log(country);

}

知道为什么它是这种行为吗？

我从互联网尝试了很多方法，但没有一个主题有效：/

编辑：对不起，我在粘贴代码时犯了一个错误

Answer 1

我猜您想将当前值 = {i} 作为 a 在您的数据句柄中传递。for (var i = data.length - 1; i >= 0; i--) {&nbsp; &nbsp; &nbsp; &nbsp; var test = data[i].Country&nbsp; &nbsp; &nbsp; &nbsp; // All good \/&nbsp; &nbsp; &nbsp; &nbsp; console.log(test);&nbsp; &nbsp; &nbsp; &nbsp; const option = (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Maybe this \/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="btn" value={i} onClick={(e) => this.dataHandle(e.currentTarget, test)} >{test}</button>&nbsp; &nbsp; &nbsp; &nbsp; );}dataHandle (country) {&nbsp; &nbsp; country = country.textContent}

Answer 2

这里的问题不在于 React，而是一个称为提升的 JS 机制的结果。当您在函数中声明 avar时，它将在函数的开头完成。所以下面这两个函数是相同的。function a(){&nbsp; //Do something&nbsp; var value=5;}function b(){&nbsp; var value;&nbsp; //Do something&nbsp; value=5;}因此，您的test变量的范围在循环之外，并且会在调用回调时更改。有两种方法可以解决此问题，您可以使用let或const，也可以使用回调工厂for (var i = data.length - 1; i >= 0; i--) {&nbsp; &nbsp; const test = data[i].Country&nbsp; &nbsp; console.log(test);&nbsp; &nbsp; const option = (&nbsp; &nbsp; &nbsp; &nbsp; <button className="btn" value={i} onClick={() => this.dataHandle(test)} >{test}</button>&nbsp; &nbsp; );}- 或者 -function createCallback(parameter){&nbsp; return function(){&nbsp; &nbsp; this.dataHandle(parameter);&nbsp; }}for (var i = data.length - 1; i >= 0; i--) {&nbsp; &nbsp; var test = data[i].Country&nbsp; &nbsp; const option = (&nbsp; &nbsp; &nbsp; &nbsp; <button className="btn" value={i} onClick={createCallback(test)} >{test}</button>&nbsp; &nbsp; );}

Answer 3

如果您打算传递event给该函数，则可以执行以下操作：(e) => this.dataHandle(e, test)然后在您的函数中，您可以访问以下任何属性event：dataHandle (evt, country) {&nbsp; &nbsp; console.log(evt.target.value);}

Answer 4

问题是因为你dataHandle只用一个参数调用函数，但我可以看到它需要两个。所以这就是为什么你有未定义的原因。