理想情况下,我只想传递一个奇异值,而不是创建多个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> } )};
您可以使用bind()将值传递给handleClick函数,而不是this.state.level仅使用value liek
bind()
handleClick
this.state.level
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>