Javascript 一旦变更，则对输入作出反应'；t火

我目前有一个简单的react应用程序，我无法让这些onchange事件在我的生命中触发

var BlogForm = React.createClass({
getInitialState: function() {
    return {
        title: '',
        content: ''
    };
},
changeTitle: function(event) {

    var text = event.target.value;

    console.log(text);

    this.setState({
        title: event.target.value
    });
},
changeContent: function(event) {
    this.setState({
        content: event.target.value
     });
},
addBlog: function(ev) {
    console.log("hit hit");
},
render: function() {
    return (
                <form onSubmit={this.addBlog(this)}>
                    <div>
                        <label htmlFor='picure'>Picture</label>
                        <div><input type='file' id='picture' value={this.state.picture} /></div>
                    </div>
                    <div>
                        <input className="form-control" type='text' id='content' value={this.state.title} onChange={this.changeTitle} placeholder='Title' />
                    </div>
                    <div>
                        <input className="form-control" type='text' id='content' value={this.state.content} onChange={this.changeContent} placeholder='Content' />
                    </div>
                    <div>
                        <button className="btn btn-default">Add Blog</button>
                    </div>
                </form>

    );
  }
});

var BlogForm=React.createClass({
getInitialState:函数（）{
返回{
标题：“”，
内容：“”
};
},
changeTitle:功能（事件）{
var text=event.target.value；
console.log（文本）；
这是我的国家({
标题：event.target.value
});
},
变更内容：功能（事件）{
这是我的国家({
内容：event.target.value
});
},
addBlog：功能（ev）{
控制台日志（“命中”）；
},
render:function（）{
返回(
图画
添加博客
);
}
});

有趣的是，当我使用

onChange={this.changetile（this）}

时，会触发事件，但

changetile

函数中的ev变量不正确。

尝试：

onChange={(evt) => this.changeTitle(evt)}

或：

而不是：

onChange={this.changeTitle}

---

尝试将onChange移动到父div。。这对我很有效

接受的答案是正确的，但我想补充一点，如果您正在实施中提供的单选组按钮解决方案，请确保删除周围div上的“数据切换”选项：

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
</div>

活跃的

如果保留上述代码中所示的数据切换选项，则将忽略您自己添加到输入字段中的onClick和onChange事件。

当您使用：

onChange={this.changeTitle (this)}

react将自动调用上述函数。您需要像这样调用函数：

onChange={this.changeTitle}

并将您提到的函数更改为箭头函数，否则您不能在函数中使用“this”关键字。在无箭头函数中，“此”关键字不是函数的对象，因此无法访问变量。

---

如果您需要向函数传递参数，您应该使用其他方法，如

bind（）

。请问您是如何设置的，我知道这应该是有效的。我将您的代码完全复制到链接的fiddle中，onChange={（evt）=>props.onChangeDate（evt）}使用以下范例：如果函数绑定正确。。。为什么这三个都不起作用？请解释为什么上面的一个起作用，下面的一个不起作用。我知道这是一个古老的回答，但你永远不应该做前两个例子。它将创建一个主要的性能打击，因为它将创建一个额外的渲染完成。你应该总是使用第三种形式。这很好用。但是你知道为什么它会起作用吗？因为许多示例表明onChange应该放在您正在调用的组件或输入中。

onChange={this.changeTitle}