javascript - React Rails 将 props 传递给 React Select

Question

我正在尝试使用 React rails 将我的 Rails 数据库中的道具传递给 React Select 组件，但文本在选择选项中显得不可见。

看法：

= react_component('SelectSearch', options: Course.all.as_json(only: [:title]))

反应选择组件：

import React from 'react';
import Select from 'react-select';

class SelectSearch extends React.Component {
  constructor(props) {
      super(props)
    }

  state = {
    selectedOption: null,
  };

  handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };

  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={this.props.options}
      />
    );
  }
}

export default SelectSearch;

当单击选择中的某些内容时，它会记录控制台日志，例如：

Option selected: {title: "English"}

但是打开选择，它完全是空白的。显然那里有一个可以点击的选项，但没有显示任何内容。同样对于搜索，不显示任何选项。

我知道这是因为我错误地传递了道具，或者错误地处理了数据，我不希望{title: "English"}我只是想要English但不确定如何正确过滤它。

标签： javascriptruby-on-railsreactjs

Answer 1

我花了一段时间才弄清楚，但得到了这个工作：

= react_component('SelectSearch', data: Course.all.as_json(only: [:title]))

import React from 'react';
import Select from 'react-select';

class SelectSearch extends React.Component {
  constructor(props) {
    super(props);
  }

  state = {
    selectedOption: null,
  };

  handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };

  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={this.props.data}
        getOptionLabel={(option) => option.title}
        getOptionValue={(option) => option.title}
      />
    );
  }
}

export default SelectSearch;

React-select 需要 avalue和 a label，这似乎是通过它的最简单方法。