Question

我正在使用Meteor与React。考虑下面这个简单的组件。有一个本地迷你Mongo集合CommentsCollection。当调用componentWillMount时，组件将在其中插入一行。 getMeteorData将返回集合中的第一条记录，我们将能够修改标题。问题：如果我将光标放在标题的开头并开始输入，在第一个字符更新后，光标将跳转到字符串的末尾，其余的输入将被放置在那里。我该如何解决这个问题？

CommentsCollection = new Meteor.Collection(null); // Local mini-mongo collection
EventTestComponent = React.createClass({
mixins   : [ReactMeteorData],
    componentWillMount(){
        CommentsCollection.insert({title:"test title", message:"some test message"});
    },
    getMeteorData(){
        return {
            comment: CommentsCollection.findOne()
        };
    },

    handleTitleChange(e){
        CommentsCollection.update({_id: this.data.comment._id}, {$set:{title: e.target.value}});
    },
    render(){
        if(this.data.comment) {
            return (
                <div>
                    <input type="text" value={this.data.comment.title} onChange={this.handleTitleChange}/>
                </div>
            );
        }else{
            return <div>Loading...</div>
        }
    }
});

Answer 1

我在发布问题后立即想出了这个解决方案：

<input type="text"
                           defaultValue={this.data.comment.title}
                           onKeyUp={this.handleTitleChange}/>

所以：将value更改为defaultValue，将onChange更改为onKeyUp。像魅力一样工作！

在Meteor + React中更新模型值onChange将光标放在字符串

1 个答案: