在 onClick 中传递单个值(不使用表单提交) [英] Pass single value within onClick (without using a form submit)

问题描述

与其创建多个 putPriority 提取，不如说我只想传递一个奇异值.

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

我想通过 onClick 传递这个值.

在我的示例中，我希望 onClick 将单个数字传递给提取中的状态"(this.state.level).

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

 putPriority: function(e) {e.preventDefault();返回获取(DATA_API，{方法:'PUT'，正文:JSON.stringify({状态:this.state.level，标签:[{}]})}).then(function(res){ return res.json(); }).then(function(data){ alert( JSON.stringify( data ) ) })},...渲染:函数(){返回 (<Button onClick={this.putPriority} title="level" value="1">高 </Button><Button onClick={this.putPriority} title="level" value="2">Medium </Button><Button onClick={this.putPriority} title="level" value="3">低 </Button>})};

解决方案

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

body: JSON.stringify({状态:值，标签:[{}]})

var App = React.createClass ({putPriority:函数(值，e){e.preventDefault();控制台日志(值)；},渲染:函数(){返回 (<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">中</button><button onClick={this.putPriority.bind(this, "3")} title="level" value="3">低 </button>

)}})ReactDOM.render(, 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>

Rather than creating several putPriority fetches, I'd ideally just like to pass a singular value.

But this value won't be entered via the user (ie not an input field)

I'd like pass this value through an onClick.

In my example, I'd like the onClick to pass a single number to "status" in the fetch (this.state.level).

Basically I want it to work like this:

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

解决方案

You can use bind() to pass value to the handleClick function and the instead of this.state.level just use value 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>

这篇关于在 onClick 中传递单个值(不使用表单提交)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！