在 onClick 中传递单个值（不使用表单提交）

IT技术 javascript reactjs
2021-05-08 06:55:53

理想情况下，我不想创建多个 putPriority 提取，而是希望传递一个奇异值。

但是这个值不会通过用户输入（即不是输入字段）

我想通过 onClick 传递这个值。

在我的示例中，我希望 onClick 将单个数字传递给提取中的“状态”（this.state.level）。

基本上我希望它像这样工作：

  putPriority: function(e) {
    e.preventDefault();
     return fetch(DATA_API, {
     method: 'PUT',
     body: JSON.stringify({
         status:this.state.level,
         tag:[
           {}
          ]
      })
      })
      .then(function(res){ return res.json(); })
      .then(function(data){ alert( JSON.stringify( data ) ) })
  },


  ...

  render: function(){
        return (
    <Button onClick={this.putPriority} title="level" value="1">High </Button>

    <Button onClick={this.putPriority} title="level" value="2">Medium </Button>

    <Button onClick={this.putPriority} title="level" value="3">Low </Button>
  }
)};
2个回答

您可以使用bind()将值传递给handleClick函数，而不是this.state.level仅使用值liek

body: JSON.stringify({
     status:value,
     tag:[
       {}
      ]
  })


var App = React.createClass ({
putPriority: function(value, e) {
    e.preventDefault();
    console.log(value);
  },

  render: function(){
        return (
          <div>
    <button onClick={this.putPriority.bind(this, '1')} title="level" value="1">High </button>

    <button onClick={this.putPriority.bind(this, "2")} title="level" value="2">Medium </button>

    <button onClick={this.putPriority.bind(this, "3")} title="level" value="3">Low </button>
</div>  
)  
}
  
})
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

您可以使用它来获取当前值：

putPriority: function(e) {
 e.preventDefault();
 var currentStatus = e.currentTarget.getAttribute("value");
 return fetch(DATA_API, {
 method: 'PUT',
 body: JSON.stringify({
     status: currentStatus,
     tag: [
       {}
      ]
  })
  })
  .then(function(res){ return res.json(); })
  .then(function(data){ alert( JSON.stringify( data ) ) })
},

这将解决您的问题 

var currentStatus = e.currentTarget.getAttribute("value");
其它你可能感兴趣的问题
上一篇Redux 存储未连接 下一篇Prometheus 系统是否兼容万豪复印机 i3 Plus？