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

小编典典

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

reactjs

理想情况下，我只想传递一个奇异值，而不是创建多个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>
  }
)};

阅读 270

2020-07-22

共1个答案

小编典典

您可以使用bind()将值传递给handleClick函数，而不是this.state.level仅使用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>

2020-07-22