16

我有这样的依赖字段

    <List>
     <select>
      <option></option>
      <option></option>
     </select>
     <select>
      <option></option>
      <option></option>
     </select>
     <input />
   </List>

如果我有 5 个<List/>组件。如何将Select2添加到每个组件中。我在网上搜索了一下。但找不到任何可行的解决方案。

以下代码用于react-select .Getting error TypeError: event.target is undefined。

var React = require('react');
var ReactDOM = require('react-dom');
var Select = require('react-select');

var Page = React.createClass({

    getInitialState: function () {
        return {
            firstValue: ''
        }
    },

    handleFirstLevelChange : function (event) {
        this.setState({
            firstValue: event.target.value
        });
    },
    render : function(){

        var options = [
            { value: '', label: 'Select an option' },
            { value: 'one', label: 'One' },
            { value: 'two', label: 'Two' }
        ];

        return (<Select
            value={this.state.firstValue}
            options={options}
            onChange={this.handleFirstLevelChange}
            />)
    }
});

ReactDOM.render(<Page />, document.getElementById('root'));
4

5 回答 5

17

我们正在使用这个 wrapper，但是围绕它的问题太多了。

首先，由于这个问题，您无法测试在 NodeJS 中使用的代码。defaultValue其次，我们在通过参数初始化各种 select2 组件时遇到了问题。这些元素中只有一个（随机）被初始化。

react-select因此，我们将转储它并尽快替换。

编辑：我们替换react-select2-wrapper为react-select. 它对我们很有用。

于 2016-02-03T20:10:27.340 回答
12

如果您使用的是refs[docs]refs ，则可以通过函数中的属性访问节点并将其componentDidMount传递给select2()：

var Select = React.createClass({
  handleChange: function () {
    this.prop.onChange(
      this.refs.myRef.value
    );
  },

  componentDidMount: function () {
    // Call select2 on your node
    var self = this;
    var node = this.refs.myRef; // or this.refs['myRef']
    $(node)
      .select2({...})
      .on('change', function() {
        // this ensures the change via select2 triggers 
        // the state change for your component 
        self.handleChange();
      });
  },

  render: function () {
    return (
      <select 
        ref="myRef"
        onChange={this.handleChange}>
        // {options}
      </select>
    );
  }
});

我不相信这是“反应方式”，但如果您不想使用react-select或其他一些工具，这可能会有所帮助。

于 2016-06-22T17:49:32.890 回答
9

由于您使用的是 React，因此您最好寻找 React 组件而不是 jQuery 插件。您可以使用 eaxmple react-select，它与 Select2 非常相似。

于 2016-02-03T12:16:09.423 回答
1

简单的包装。

在 index.html 上添加 select2 js + css，在选择输入上编写包装器

function renderOptions(option_items) {
    if(option_items) {
        return Object.entries(option_items).map(function (item) {
            return <option key={item[0]} value={item[0]}>{item[1]}</option>
        })
    }
}

class Select2Input extends Component {

    constructor(props) {
        super(props)
        this.ref_input = React.createRef()
    }

    /**
    * Add select2 bind and send onChange manually
    */
    componentDidMount() {
        const self = this

        $(self.ref_input.current).select2({
            tags: true,
        }).on('change', function(event) {
            var value = $(event.currentTarget).val()
            if(self.props.multiple === true) {
                value = List(value)
            }
            self.props.onChange(self.props.name, value)
        })
    }

    /**
    * Emit change event for reload select2 if options has change
    */
    componentDidUpdate(prevProps) {
        if(prevProps.option_items !== this.props.option_items) {
            $(this.ref_input.current).change()
        }
    }

    render() {
        return <select className="form-control"
                    multiple={this.props.multiple}
                    name={this.props.name}
                    value={this.props.value}
                    disabled={this.props.disabled}
                    ref={this.ref_input}>
                            {renderOptions(this.props.option_items)}
            </select>
    }
}
于 2019-06-07T07:35:31.783 回答
0

如果您只是在 React 应用程序中使用 jquery 和 select2，您可以在“head”标签内的 public/index.html 中简单地链接 jquery 和 select2 的 cdn。然后在你的 src/components/component.js 中。您可以像这样使用 jquery select2：

constructor(props) {
        super(props);
        this.state = {
            Provinces: [],
        };
        this.select2PX = this.select2PX.bind(this);
        // this.ApiTest = this.ApiTest.bind(this);
}

select2PX(){
        window.$(document).ready(function() {
            window.$('#phuong-xa').select2();
        });
}

componentDidMount(){
  this.select2PX();
}


render(){
   return (.... html);
}

因为你使用public/.html文件中的cdns，所以需要使用window.$来使用jquery。它实现了与在 html 文件中使用 select2 相同的功能。

于 2018-10-15T07:18:54.700 回答