React 和 HTML Select 组件到 return String 而不是 Integer 的最佳方式

Question

我有一个 React-class (JSX)，其中包含以下（此处略有简化）代码：

var Select = React.createClass({
  onChange: function (ev) {
     console.log(ev.target.value);
  },
  render: function() {
     var optionsHtml = this.state.options.map(function (el) {
                    console.log(this.props.getValue(el);
                    return (
                        <option key={this.props.getValue(el)}
                                value={this.props.getValue(el)}> { this.props.getLabel(el) } 
                        </option>
                    )
                });
    return <select onChange={this.onChange}>
     {optionsHtml}
    </html>
}

在渲染函数中，console.log returns 值的整数（即 1、2、3）在初始化 Options-HTML 和设置值时，但是在当实际的 Select-box 值发生变化时，onChange-method 值是一个字符串（即“1”、“2”、“3”）。

解决此问题的一种方法是在 onChange 中使用之前检查值并将其转换为 Number，但是还有其他方法吗？

编辑：

选项数组看起来像这样

var options = [
  { id: 1, name: "Test" },
  { id: 2, name: "Test2" },
  { id: 3, name: "Test3" }
]

然后可以使用 getValue 和 getLabel 函数调用组件，如下所示：

<Select options={options}, 
   getValue: function(v) {
      return v.id;
   },
   getLabel: function(v) {
      return v.name;
   }/>

一旦我生成要发送到后端的 JSON，不同类型就是一个问题，我需要在某个时候进行转换。

Answer 1

当您的 onChange 函数执行并尝试读取选项标签的 value 时，重要的是要记住 all 属性将被读取为字符串。

话虽如此，请注意

onChange: function (ev) {
   console.log(ev.target.value);
   //          ^^^^^^^^^^^^^^^ always string
}

因此，每次您想在 onChange 函数中处理一个值时，都必须将该值转换为一个数字。这样的事情应该可以解决问题：

onChange: function (ev) {
   var valueInt = parseInt(en.target.value, 10);
   console.log(valueInt);
}

或者如果该值不一定是数字，您可以尝试将其解析为数字（如果适用）：

onChange: function (ev) {
   var valueInt;
   try{
       valueInt = parseInt(en.target.value, 10);
   }catch(e){ 
        // handle value not being a number if unexpected
   }
   console.log(valueInt);
}

Answer 2

我会将渲染方法和事件侦听器更改为：

onChange(event) {
  const el = this.state.options[event.target.value];
  const value = this.props.getValue(el);
},

render() {
  const options = this.state.options.map((el, idx) => (
    <option key={this.props.getValue(el)} value={idx}>{ this.props.getLabel(e) }</option>
  ));

  return (
    <select onChange={this.onChange}>
      { options }
    </select>
  )
}

这样做，您并没有获得实际价值。你在告诉 "Pick object at index N from within predefined objects and get it's value."

React 和 HTML Select 组件到 return String 而不是 Integer 的最佳方式

Best way for a React and HTML Select-component to return String instead of Integer

javascript

jsx

reactjs

react-jsx