Question

我正在维护其他人的代码。网络目前正在使用react-select@1.3.0

而且我必须将数据传递到数据类型限于数组值的后端，例如：["1", "2", "3" ...]。甚至不允许包含这样的对象的数组，例如：[{a:"1"}, {b:"2"}, {c:"3"} ...]。

因此，使用反应选择传递数据的方式，结构为

[
  { label: "one", value: "1" },
  { lable: "two", value: "2" },
  { label: "three", value: "3" },
  // ...
]

我现在将我从react-select获得的值传递给状态下的临时位置，并在用户按下“提交”按钮时再次构造数据，但是，效率似乎还不够？

下面是真实代码的简单版本：

import React, { Component } from 'react';
import Select from "react-select";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tempAr: [ ],
      selectedValues: [ ]
    }
  }

  onChange(values) {
    this.setState({values});
  }

  submit() {
     const newValue = this.state.tempArr.map(i=>i.value)
     this.setState({selectedValue:newValue})
   }

  render() {

    const branch_list = [{label:"Taoyuan Branch", value:"001"}, 
                         {lable:"Pintung Branch", value:"002"}, 
                         {label:"Kaoshiung Branch", value:"003"} ...] 

    return (
      <div className="App">
            <Select 
                multi 
                options={branch_list} 
                onChange={onChange}
                value={this.state.tempArr}
                removeSelected={true}
                hideSelectedOptions={false}
              />     
       </div>
    );
  }
}

export default App;

是否有直接方法跳过数据重组过程？

可以选择选择传递嵌套数据吗？

0 个答案: