Javascript 反应输入 onChange 不会触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35115571/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React input onChange won't fire
提问by Cekaleek
I currently have this simple react app and I cannot get these onchange events to fire for the life of me.
我目前有这个简单的 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>
);
}
});
Funny thing is when I use onChange={this.changeTitle (this)}, the event fires but the ev variable in the changeTitlefunction is not the correct one.
有趣的是，当我使用时onChange={this.changeTitle (this)}，事件会触发，但changeTitle函数中的 ev 变量不是正确的。
回答by Samuli Hakoniemi
Try:
尝试：
onChange={(evt) => this.changeTitle(evt)}
or:
或者：
onChange={this.changeTitle.bind(this)}
instead of:
代替：
onChange={this.changeTitle}
回答by Chris
try moving the onChange to the parent div.. this worked for me
尝试将 onChange 移动到父 div .. 这对我有用
回答by Jenever
The accepted answer is correct, BUT I wanted to add that, if you are implementing the radio group button solution as provided in the bootstrap documentation, make sure to remove the "data-toggle" option on the surrounding 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>
If you keep the data-toggle option as shown in the code above, the onClick and onChange events you added yourself to the input field will be ignored.
如果您保留如上代码所示的数据切换选项，您自己添加到输入字段的 onClick 和 onChange 事件将被忽略。
回答by newmoon
when you use :
当你使用：
onChange={this.changeTitle (this)}
react will call mentioned function automatically. you need to call the function like this:
react 会自动调用提到的函数。你需要像这样调用函数：
onChange={this.changeTitle}
and also change your mentioned function to arrow function, otherwise you cant use "this" keyword in your function. in none arrow function "this" keyword is not object of your function so you cant access to your variables.
if you need to pass arguments to your function you should use other methods like bind()
并将您提到的函数更改为箭头函数，否则您不能在函数中使用“ this”关键字。在无箭头函数中，“ this”关键字不是您的函数的对象，因此您无法访问您的变量。如果您需要将参数传递给函数，则应使用其他方法，例如bind()
