onClick内で単一の値を渡す（フォームの送信を使わずに）

Question

putPriorityの複数のフェッチを作成するのではなく、理想的には特異値を渡したいと思います。

しかし、この値はユーザー（つまりいない入力フィールド）を介して入力されることはありません

私はのonClickを通じて、この値を渡したいと思います。

私の例では、フェッチ（this.state.level）の "status"に単一の数値を渡すようにしたいと思います。

基本的に私はそれがこのように仕事をしたい：

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

Answer 1

あなたがすることができますbind()を使用して​​関数に値を渡し、の代わりに値を渡しますちょうど

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>

Answer 2

あなたは現在の値を取得するためにこれを使用することができます：

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