如何绑定 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--) {

        var test = data[i].Country

        // All good \/

        console.log(test);

        const option = (

                                                           // Maybe this \/                                               

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

        );

}

dataHandle (country) {

    country = country.textContent

}

Answer 2

这里的问题不在于 React，而是一个称为提升的 JS 机制的结果。当您在函数中声明 avar时，它将在函数的开头完成。所以下面这两个函数是相同的。

function a(){

  //Do something

  var value=5;

}

function b(){

  var value;

  //Do something

  value=5;

}

因此，您的test变量的范围在循环之外，并且会在调用回调时更改。

有两种方法可以解决此问题，您可以使用let或const，也可以使用回调工厂

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

    const test = data[i].Country

    console.log(test);

    const option = (

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

    );

}

- 或者 -

function createCallback(parameter){

  return function(){

    this.dataHandle(parameter);

  }

}

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

    var test = data[i].Country

    const option = (

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

    );

}

Answer 3

如果您打算传递event给该函数，则可以执行以下操作：

(e) => this.dataHandle(e, test)

然后在您的函数中，您可以访问以下任何属性event：

dataHandle (evt, country) {

    console.log(evt.target.value);

}

Answer 4

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