Javascript 如何将Select2与Reactjs一起使用？

我有这样的依赖字段

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

如果我有5个

组件。我如何添加到每个组件。我在网上搜索过。但找不到任何有效的解决方案

下面是的代码。获取错误类型错误：event.target未定义

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var-Select=require（'react-Select'）；
var Page=React.createClass({
getInitialState:函数（）{
返回{
第一个值：“”
}
},
HandleFirstLevel更改：函数（事件）{
这是我的国家({
firstValue:event.target.value
});
},
render:function（）{
变量选项=[
{值：''，标签：'选择选项'}，
{值：'1'，标签：'1'}，
{值：'two'，标签：'two'}
];
返回（）
}
});
ReactDOM.render（，document.getElementById（'root'））；

因为您使用的是React，所以最好是寻找React组件，而不是jQuery插件。您可以使用for eaxmple，它与Select2非常相似。

我们正在使用，但是它有太多的问题

首先，您不能在NodeJS中使用的地方测试代码，因为。 其次，我们在通过

defaultValue

参数初始化各种select2组件时遇到问题。这些元素中只有一个（随机）被初始化

因此，我们将很快将其转储并替换为

react select

---

编辑：我们将

react-select2-wrapper

替换为

react-select

。它对我们非常有用。

如果您使用的是

refs

，您可以通过

componentDidMount

函数中的

refs

属性访问节点，并将其传递给

select2（）

：

var Select=React.createClass({
handleChange:函数（）{
这是道具更换(
this.refs.myRef.value
);
},
componentDidMount:函数（）{
//在您的节点上调用select2
var self=这个；
var node=this.refs.myRef；//或this.refs['myRef']
$（节点）
.select2（{…}）
.on（'change'，function（））{
//这可确保通过select2触发器进行更改
//组件的状态将发生更改
self.handleChange（）；
});
},
渲染：函数（）{
返回(
//{options}
);
}
});

---

我不相信这是“反应方式”，但如果您不想使用

React select

或其他工具，这可能会有所帮助

如果您只是在react应用程序中使用jquery和select2，您只需在public/index.html的“head”标记中链接jquery的cdn和select2即可。 然后在src/components/component.js中。您可以像这样使用jquery select2：

构造函数（道具）{
超级（道具）；
此.state={
省份：[]，
};
this.select2PX=this.select2PX.bind（this）；
//this.ApiTest=this.ApiTest.bind（this）；
}
选择2px（）{
window.$（文档）.ready（函数（）{
窗口。$（'phuong xa'）。选择2（）；
});
}
componentDidMount（）{
这个。选择2px（）；
}
render（）{
返回（..html）；
}

简单包装器

在index.html上添加select2js+css，在selectinput上编写包装器

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>
    }
}

功能渲染（选项\u项）{
如果（选项_项）{
返回Object.entries（选项项）.map（函数项）{
返回{item[1]}
})
}
}
类Select2Input扩展组件{
建造师（道具）{
超级（道具）
this.ref_input=React.createRef（）
}
/**
*手动添加select2 bind和send onChange
*/
componentDidMount（）{
const self=this
$（self.ref\u input.current）。选择2({
标签：是的，
}).on（'change'，函数（事件）{
var值=$（event.currentTarget.val（）
if（self.props.multiple===true）{
值=列表（值）
}
self.props.onChange（self.props.name，value）
})
}
/**
*如果选项发生更改，则为重新加载选择2发出更改事件
*/
componentDidUpdate（prevProps）{
if（prevProps.option\u项目！==此.props.option\u项目）{
$（this.ref_input.current）.change（）
}
}
render（）{
返回
{renderOptions（this.props.option_items）}
}
}

我尝试在html页面中添加select2，并使用了此代码段。但它只更改了第一个select元素。依赖的select字段没有更改$（'select'）。select2（）；一般来说，这对于在React中包装jQuery库很有用：但是我需要一个Select2的解决方案，因为我目前正在我的应用程序中使用它。@Vishwasraj你得到解决方案了吗？我为此绞尽脑汁：（@Vikram未找到解决方案。已更改为具体化css库。更改为library@Vishwasraj狗屎，这将是如此困难，任何其他开发人员接管这个项目，因为其余的模块都写在上面JQuery@Vikram是的…从stratch重写select2库以使其适用于react框架是唯一可能的解决方案。甚至react select有问题。我无法设置状态。如果我尝试设置状态，下拉列表不会关闭。嗯，不确定。我们到目前为止还没有尝试。它应该是非常可配置的。文档中没有一些标志吗？HandleFirstLevel更改：函数（事件）{this.setState（{firstValue:event.target.value}）；}我得到TypeError:event.target未定义错误TypeError:event.target未定义问题的详细信息。我不知道为什么得到TypeError:event.target未定义错误

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>
    );
  }
});

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>
    }
}