对更改的反应输入不会触发

React input onChange won't fire

本文关键字：输入      更新时间：2023-09-26

我目前有这个简单的反应应用程序，我无法让这些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>
    );
  }
});

有趣的是，当我使用 onChange={this.changeTitle (this)} 时，事件会触发，但 changeTitle 函数中的 ev 变量不正确。

尝试：

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

或：

onChange={this.changeTitle.bind(this)}

而不是：

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"关键字。 在 none 箭头函数中，"this" 关键字不是函数的对象，因此无法访问变量。如果需要将参数传递给函数，则应使用其他方法，例如bind()

确保你没有给它一个已经给定的id。我不是为什么，但是使用类型文件输入的重复 ID 会阻止它工作。

相关文章：