Question

使用https://github.com/JedWatson/react-select。我有一个循环遍历数组的方法，我希望将其输入到react-select选择器的值中。任何想法为什么const值无效？

  renderList (thelist, i) {
    const { selectedOption } = this.state;

    console.log(thelist);

    // this throws me error
    const value = {
      value: {thelist.name},
      label: {thelist.name}
    }

   return (
    <div>
     <Select
       name="form-field-name"
       onChange={this.handleChange}
       value={value}
     />
   </div>
);

Answer 1

对象值不需要花括号。只是做：

const value = {
  value: thelist.name,
  label: thelist.name
}

在声明对象时或者需要告诉React将render()内的某些内容解释为纯JavaScript而不是字符串时，才使用花括号。

但是，您可能还想为选择组件定义options道具。 value只为下拉列表提供了一个选定的值，但options是实际定义的......嗯，选项。选项可以是多个，因此我们在对象数组中定义它们。

所以：

options={[
  {
    value: thelist.name1,
    label: thelist.name1
  },
  {
    value: thelist.name2,
    label: thelist.name2
  }
]}

React select从数组中呈现值

1 个答案: