如何在表单的选择字段onChange中传递对象值(使用React,不使用Redux)

Question

我目前正在研究一个简单形式的反应组件(没有redux,只是使用react-bootstrap进行样式化)

我以下列形式从数据库中提取数据:

[
  {
    "id":"123",
    "name":"Amy Pond",
    "age":"22",
    "reputation":22000
  },
  {
    "id":"124",
    "name":"Clara Oswald",
    "age":"24",
    "reputation":35000
 }
 ...
]

并将其放入一个对象:

let userlist = [];
userlist = addUsers(this.state.users);

我使用map来填充基于此数据的下拉列表,并可以从下拉列表中正确设置用户的状态到选定的状态:

<FormControl
   id = "user"
   componentClass="select"
   onChange={this.handleChange}
>
   {userlist.map((r , i) =>
     <option
       key={i}
       value={r.name}>
       {r.name}
     </option>
  )}
</FormControl>

使用handleChange()

handleChange(event) {
  this.setState({
    value: event.target.value,
    // reputation: ???? // here's where I'm running into issues
    // age: ???????  // and here
});

我的问题是,我需要用户在handleChange函数中的年龄和声誉来相应地设置其状态.我试过过去r而不是r.name但我[object Object]回来了.

console.log ("Handle Change Value: " + event.target.value);

如果我尝试event.target.value.name我会undefined回来

到目前为止唯一有效的方法是使用JSON.stringify,但我觉得这不是正确的方法.一旦我得到了这个名字,我也想过只搜索一下这些对象,但是如果有很多对象,我觉得这样效率会非常低效？我也不知道该怎么做.

任何人都可以帮我找到一种方法来传递这两个额外的值,以便我可以设置状态？地图甚至是创建选项的最佳方式吗？老实说,我觉得这是一件很简单的事情,但是我还是刚刚做出反应,而且我一直在努力解决这个问题太久了!

任何想法/改变/评论/方式,使这更好​​,将不胜感激!我意识到也许使用像redux-form这样的东西可以让这更容易,但我希望有一个简单的方法来做到这一点,而不是现在.

编辑: onChange应该已设置为onChange = {this.handleChange},只是粘贴了我尝试进行故障排除的错误代码.我在构造函数中绑定它:

constructor(props) {
  super(props);
  ...
  this.handleChange = this.handleChange.bind(this);
}

Answer 1

使用用户ID作为each中的值option，然后在中handleChange找到用户userlist以访问用户的所有属性：

<FormControl
   id = "user"
   componentClass="select"
   onChange={this.handleChange.bind(this)}
>
   {userlist.map((r , i) =>
     <option
       key={i}
       value={r.id}>
       {r.name}
     </option>
  )}
</FormControl>

handleChange(event) {
  const userId = event.target.value;
  const user = userlist.find(u => u.id === userId);
  this.setState({
    value: user
  });
}

此外，您传递onChange属性的方式可能会导致问题。很难看到所有代码，但是要确保传递一个对handleChange函数的引用（请参见我的答案中的上述内容），而不是在那里调用它（如您的问题：onChange={this.handleChange()}，除非您的this.handleChange函数返回一个函数）。