简体   繁体   English

传递多个参数以在React.js中起作用

[英]Passing multiple parameters to function in reactjs

I have a json file in node server.js artist object as state 我在节点server.js艺术家对象中有一个json文件作为状态

{
  id: 1,
  name: "name_test1",
  email: "test1@test1.pl",
  pass: "pass_test1",
},

I created form to add new artist to object : 我创建了将新艺术家添加到对象的表单:

<div className="form-group">
    <label for="exampleInputName2">Name</label>
    <input
        name="name" className="form-control" placeholder="name" value={this.state.name}
        onChange={this.onInputChange.bind(this, 'name')} />
  </div>
  <div className="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input
        type="email" className="form-control" placeholder="email" value2={this.state.email}
        onChange={this.onInputChange.bind(this, 'email')}  />

</div>
<div className="form-group">
  <label for="exampleInputEmail2">Password</label>
  <input
      type="password" className="form-control"  placeholder="password" value3={this.state.password}
      onChange={this.onInputChange.bind(this, 'password')}  />

<button type="submit" className="btn btn-default" onClick={this.onClick}>Add Artist</button><br/><br/>

I want to send the data from the inputs (name, email, password) to my onClick function which looks like : 我想将数据从输入(名称,电子邮件,密码)发送到我的onClick函数,该函数如下所示:

   onInputChange: function(name, e) {
    var change = {};
    change[name] = e.target.value;
    this.setState(change)
  },



onClick: function() {
    if (this.state.name !== "" || this.state.email !== "" || this.state.password !=="") {
      Actions.postArtist(this.state.name);
    }
    this.setState({name: ""})
  },

But i have no idea how I can pass to onClick function more than one parameter (now i have name, but want also take from my inputs email and password. 但是我不知道如何将一个以上的参数传递给onClick函数(现在我有了名称,但也想从我的输入电子邮件和密码中获取)。

When i submit the onClick button on my formulage my object looks like : 当我在公式上提交onClick按钮时,我的对象如下所示:

{id: 1486368952, name: "BLEH"}

and i want looks like this : 我想要看起来像这样:

{id: 1486368952, name: "BLEH", email: "xxx", password: "xxx"}

My postArtist function look like this : 我的postArtist函数如下所示:

postArtist: function(name, email, password) {

if(!this.artists) {
  this.artists = [];
}
  var artist = {
    "id": Math.floor(Date.now() / 1000),
    "name": name,
    "email": email,
    "password": password,
    // "password_conf": password_conf
  };
  this.artists.push(artist);

You can write it like this: 您可以这样写:

onClick: function() {
    if (this.state.name !== "" || this.state.email !== "" || this.state.password !=="") {
      let data = this.state;
      let obj = {name: data.name, email: data.email, password: data.password}
      Actions.postArtist(obj);
    }
    this.setState({name: ""})
  },

Or you can pass the complete state obj if it contains only these 3 fields, like this: 或者,如果仅包含以下3个字段,则可以传递完整的状态obj,如下所示:

 onClick: function() {
      if (this.state.name !== "" || this.state.email !== "" || this.state.password !=="") {
          Actions.postArtist(this.state);
      }
      this.setState({name: ""})
  },

And in postArtist method recieve it as a object like this: 在postArtist方法中,将其作为这样的对象接收:

postArtist: function(data) {

  if(!this.artists) {
    this.artists = [];
  }
  var artist = {
    "id": Math.floor(Date.now() / 1000),
    "name": data.name,
    "email": data.email,
    "password": data.password,
    // "password_conf": password_conf
  };
  this.artists.push(artist);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM