React Flux 项目中的 React-tagsinput 模块实现;我的代码中标签功能有错误?

Question

我尝试了几种不同的实现(你可以看到它们被注释掉了)。

启动项目后，屏幕会显示一个输入文本框，其中写有"tag1 tag2"——因为这就是我将它们初始化为的内容; 但我无能为力，因为每当我尝试操作它们(删除/空格键/添加另一个字母)时，它们都会被替换为

[object Object]

在文本字段中，然后我仍然无法做任何事情，除了用箭头键返回它;但是如果我尝试其他任何东西，它会将光标推回前面。

---

我尝试了一些变体，例如：
TagsCom.React.createElement("text"，null,...)或只是 TagsCom.createElement("text"， null,...)
甚至只是用TagsInput替换TagsCom，但到目前为止，唯一可以远程工作的代码行是：

<TagsInput value={this.state.tags} onChange={this.handleChange} />

虽然这已经解决了对象问题，但它仍然全是静态文本，不像标签那样起作用。

这是我更新的组件代码：

var React      = require('react');
var ReactDOM   = require('react-dom');
var TagsInput1 = require('react-tagsinput');
var TagsCom    = require('./react-tagsinput.js');
//var TagsCSS  = require('react-tagsinput/react-tagsinput.css');
var TagsComponent = React.createClass
({
displayName    : "TagsComponent",
getInitialState: function()
{
return {
tags: ["tag1", "tag2"]
};
},
saveTags: function (){
console.log("tags: ", this.state.tags.join(", "));
},
handleChange: function(event){
this.setState({tags: event.target.value});
},
render: function ()
{
<TagsInput value={this.state.tags} onChange={this.handleChange} />
}
});
module.exports = TagsComponent;

这是指向 React-TagsInput 模块的 git 链接，该模块 https://github.com/olahol/react-tagsinput 所有其他文件

Answer 1

input标签的onChange回调只有一个参数event，而不是您似乎期望的value。

它应该看起来像这样;

handleChange: function(event){
this.setState({tags: event.target.value});
},

Answer 2

经过多次试验和错误，我已经找到了正确的渲染函数 - 它将 TagsInput 重命名为 ReactTagsInput 并将 onChange 参数保留为"value"：

var React = require('react');
var ReactDOM = require('react-dom');
var ReactTagsInput = require('./react-tagsinput.js');
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-with-addons.js"></script>
tags:[];  
var TagsComponent = React.createClass({
displayName: "TagsComponent",
getInitialState: function() {
return {
tags: ["tag1", "tag2"]
};
},
saveTags: function () {
console.log("tags: ", this.state.tags.join(", "));
},
handleChange: function(value){
this.setState({tags: value});
},
render: function () {
return 
<div>
<ReactTagsInput value={this.state.tags} onChange={this.handleChange}/>   
</div>;
}
});

module.exports = TagsComponent;