Question

我已经开始学习反应并开发一个简单的应用程序。我陷入了一个需要将状态存储变量传递给render的函数的位置。当我尝试将其绑定到函数时，变量将更改为我无法访问的对象。

有什么方法可以解决这个问题吗？

我的代码如下：

handleQuantityChange: function(e) {
  this.setState({ value: parseInt(e.target.value) });
},

handleBuy: function(bidPrice){
  console.log(bidPrice);
},

render: function(){
  this.state.bidPrice = 24;
  return <form>
            <input type="text" placeholder="Quantity" onChange={this.handleQuantityChange}/>
            <li>{this.state.bidPrice}</li>
            <input type="button" value="Buy" onClick={this.handleBuy.bind(this.state.bidPrice)}/>
         </form>

我的原始代码变得非常复杂，所以我没有在这里发布。但是为了参考，请查看此jsfiddle

代码在小提琴中不起作用，因为这有许多其他问题，并且缺少我需要处理的错误处理，但它应该在本地服务器上运行。我应该以不同的方式处理这个问题吗？是否有比使用的更改更好的事件？

Answer 1

添加getInitialState fn以初始化值

 getInitialState: function() {
    return { bidPrice: 24 };
 },

并使用

onClick={this.handleBuy.bind(this, this.state.bidPrice)}

Answer 2

应该是

onClick={this.handleBuy.bind(this, this.state.bidPrice)}

以下是bind语法供参考：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind。

fun.bind（thisArg [，arg1 [，arg2 [，...]]]）

将响应中的变量绑定到函数会将其更改为对象

2 个答案: