React-tagsinput模块在React Flux项目中的实现；我的标签功能代码有错误吗？

Question

我尝试了几种不同的实现方式（您可以看到它们被注释掉了）。

启动项目后，屏幕会显示一个输入文本框，其中写有 'tag1 tag2' - 因为我将它们初始化为；但我无能为力，因为每当我试图操纵它们时（delete/spacebar/add 另一个字母）它们就会被

取代

[object Object]

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

我尝试了一些变体，例如：
TagsCom.React.createElement("text", null,...) 或者只是 TagsCom.createElement("text", 空,...)
甚至只是用 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;

这里是 git link 到具有所有其他文件的 react-tagsinput 模块 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;

React-tagsinput模块在React Flux项目中的实现；我的标签功能代码有错误吗？

React-tagsinput module implementation in React Flux project; there is an error in my code for the tag functionality?

git

reactjs

react-jsx

flux

reactjs-flux