个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在使用 React 创建搜索功能。我以前用过这种方法，但没有用过 React，但它确实有效。现在，它在控制台中出现错误，显示“Uncaught TypeError: Cannot read property 'addEventListener' of null”。这和它的 react 有什么关系吗？我该如何解决这个问题？
<body>
<div id="searching"></div>
<script type="text/babel">
class SearchBox extends React.Component { render(){ return(
<form>
<input type="text" className="searchbox" />
</form>) } } ReactDOM.render(
<SearchBox />, document.getElementById("searching"));
</script>
JS
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
const repositories = [];
fetch(endpoint)
.then(blob => blob.json())
.then(data => repositories.push(...data));
function findMatches(wordToMatch, repositories) {
return repositories.filter(place => {
const regex = new RegExp(wordToMatch, "gi");
return place.city.match(regex) || place.state.match(regex);
});
};
function displayMatches() {
const matchArray = findMatches(this.value, repositories);
const html = matchArray.map(place => {
const regex = new RegExp(this.value, "gi");
const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
return `
<li>
<span class="name">${cityName}, ${stateName}</span>
<span class="population">${numberWithCommas(place.population)}</span>
</li>
`;
}).join('');
console.log(matchArray);
suggestions.innerHTML = html;
};
const searchInput = document.querySelector(".searchbox");
const suggestions = document.querySelector(".suggestions");
searchInput.addEventListener("change", displayMatches);
searchInput.addEventListener("keyup", displayMatches);
最佳答案
作为一般规则，将 ReactJS 与非 ReactJS 的处理方式混合在一起并不是一个好主意。 React 有一种非常具体的处理事件的方式，并且直接调用 addEventListener() 效果不佳。当您调用 addEventListener() 时，它有时会起作用，但您确实不应该依赖它。
你不应该混合两者的原因是 React 可以在任何时候重建 DOM:任何时候状态发生变化，React 都可以拆除 DOM元素并自行决定创建新元素，而不是您的。您既不知道也不关心元素何时渲染，这就是 React 之美的一部分。
那么你如何处理事件呢？在创建元素时，您必须使用 onChange 和 onKeyUp 等属性以一种看似老式的方式将它们连接起来。 (在幕后，React 实际上会在正确的时间使用 addEventListener，但你永远不会真正注意到这种情况的发生。)
那么，代码的修订版本可能会采用如下结构:
class SearchBox extends React.Component {
constructor(props) {
super(props);
// This binding is necessary to make `this` work in the callback
this.onKeyUp = this.onKeyUp.bind(this);
this.onChange = this.onChange.bind(this);
}
onChange(event) {
...
}
onKeyUp(event) {
...
}
render() {
return(
<form>
<input type="text" className="searchbox" onChange={this.onChange} onKeyUp={this.onKeyUp} />
</form>
);
}
}
ReactDOM.render(
<SearchBox />,
document.getElementById("searching")
);
正如你所看到的，整个代码的结构是不同的。 React 不仅仅是一种轻松发出 HTML 元素的方法:它是一个完整的基于组件的微框架，您可以围绕它设计整个 UI。
关于javascript - React 中的 addEventListener 为 null，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42532087/
26
4
0
最近开始学习oracle和sql。 在学习的过程中，我遇到了几个问题，我的 friend 在接受采访时被问到这些问题。 SELECT * FROM Employees WHERE NULL IS N
这个问题在这里已经有了答案: Can we subtract NULL pointers? (4 个回答) 关闭 2 个月前。 是否定义了NULL - NULL？ (char *)NULL - (ch
是否有推荐的方法(根据 .net Framework 指南)检查 null，例如: if (value == null) {//code1} else {//code2} 或 if (value !=
我正在尝试将值插入数据库，但出现这样的错误任何人都可以告诉我为什么该值为空，如下所示: An exception occurred while executing 'INSERT INTO perso
这个问题在这里已经有了答案: String concatenation with a null seems to nullify the entire string - is that desire
您好，我正在 Android 联系人搜索模块中工作。我正在查询下方运行。 cur = context.getContentResolver().query(ContactsContract.Data.
下面的 SQL 表定义说明了从我的 MYSQL 数据库创建表的语句之一，该数据库是由我公司的前开发人员开发的。 DROP TABLE IF EXISTS `classifieds`.`category
我主要有应用程序开发背景。在编程语言中 variable == null或 variable != null有效。 当涉及到 SQL 时，以下查询不会给出任何语法错误，但也不会返回正确的结果。 sel
我在尝试检查某些元素是否为 NULL 时遇到段错误或不。任何人都可以帮忙吗？ void addEdge(int i, int j) { if (i >= 0 && j > 0)
在 SQL 服务器中考虑到以下事实:Col1 和 Col2 包含数值和 NULL 值 SELECT COALESCE(Col1,Col2) 返回一个错误:“COALESCE 的至少一个参数必须是一个不
在 SQL 服务器中考虑到以下事实:Col1 和 Col2 包含数值和 NULL 值 SELECT COALESCE(Col1,Col2) 返回一个错误:“COALESCE 的至少一个参数必须是一个不
下面查询的关系代数表达式是什么？我找不到“Is Null”的表达式。 SELECT reader.name FROM reader LEFT JOIN book_borrow ON reader.ca
我正在尝试使用三元运算符来检查值是否为 null 并返回一个表达式或另一个。将此合并到 LINQ 表达式时，我遇到的是 LINQ 表达式的 Transact-SQL 转换试图执行“column = n
我在给定的代码中看到了以下行: select(0, (fd_set *) NULL, (fd_set *) NULL, (fd_set *) NULL, &timeout); http://linux
var re = /null/g; re.test('null null'); //> true re.test('null null'); //> true re.test('null null')
这个问题在这里已经有了答案: 关闭 13 年前。 我今天避开了一场关于数据库中空值的激烈辩论。 我的观点是 null 是未指定值的极好指示符。团队中有意见的其他每个人都认为零和空字符串是可行的方法。
由于此错误，我无法在模拟器中运行我的应用: Error:null value in entry: streamOutputFolder=null 或 gradle - Error:null value
我正在尝试在 Android 应用程序中创建电影数据库，但它返回错误。知道这意味着什么吗？ public Cursor returnData() { return db.query(TABLE
我一直在检查浏览器中的日期函数以及运行时间 new Date (null, null, null); 在开发工具控制台中，它给出了有效的日期 Chrome v 61 回归 Sun Dec 31 189
为什么 NA==NULL 会导致 logical (0) 而不是 FALSE？ 为什么 NULL==NULL 会导致 logical(0) 而不是 TRUE？ 最佳答案 NULL 是一个“零长度”对象
我是一名优秀的程序员,十分优秀！