Question

我正在尝试实现文本搜索，例如浏览器查找文本功能
与此类似

-当我在文本框中输入任何内容并点击AccountCircle时，它应该可以继续移动。 -因此，我尝试从handleChange方法获取值并将其传递到handleFind方法内。 -但无法正常工作，我收到错误信息Uncaught TypeError：无法读取未定义的属性'handleChange' -我所有的代码都是SearchBar.js -您能告诉我如何修复它，以便将来我自己修复。 -在下面提供我的沙盒和相关代码段。

https://codesandbox.io/s/yv1zpj874x

 handleChange(e) {
    console.log("e----------->", e); // your search bar text
    console.log("e----------->", e.target.value); // your search bar text
    let object = document.getElementById("myDiv");
    console.log(object.textContent); // your div text

    // now that you have the two strings you can do your search in your favorite way, for example:
    let searchBarText = [];
    searchBarText = e.target.value;
    console.log("searchBarText --->", searchBarText);

    let divText = object.textContent;
    console.log("divText --->", divText);

    if (divText.includes(searchBarText)) {
      console.log("the div text contains your search text");
    } else {
      console.log("the div text doesn't contain search text");
    }

    // this.setState({ testHighlight: response.data });

    // this.setState({ testHighlight: searchBarText });
    this.setState({ testHighlight: [searchBarText] });
    return e;
  }
  handleFind(e) {
    this.handleChange("text");
    console.log("e----------->", e); // your search bar text
    console.log("e----------->", e.target.value); // your search bar text
  }

 render() {
    return (
      <div className="input-container">
        <InputLabel htmlFor="input-with-icon-adornment">
          With a start adornment
        </InputLabel>
        <Input
          id="input-with-icon-adornment"
          onChange={this.handleChange}
          placeholder="Search..."
          startAdornment={
            <InputAdornment position="start">
              <AccountCircle onClick={this.handleFind} />
            </InputAdornment>
          }
        />

Answer 1

首先，突出显示无需单击图标即可工作，因为突出显示每次输入更改都会触发setState。

此外，我看到您正在收到警告：

警告：出于性能原因，此合成事件被重用。如果看到此消息，则说明正在释放/无效的合成事件上访问方法isDefaultPrevented。这是一项无操作功能。如果必须保留原始的合成事件，请使用event.persist（）。有关更多信息，请参见https://reactjs.org/docs/events.html#event-pooling。

使用文档中提到的event.persist()来确保以异步方式获得所需的内容。

另一件事-您没有绑定handleFind方法。因此，您必须像使用handleChange一样。

  constructor(props) {
    super(props);
    this.state = {
      testHighlight: []
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleFind = this.handleFind.bind(this);
  }

第三件事-您在命名HighlighterImplementation而不是componentWillRecieveProps时犯了componentWillReceiveProps错误。

将来，请更彻底地使用控制台错误，以避免出现意外行为。

Here正在使用Codepen。

希望有帮助。

Answer 2

好的，请注意以下几点：

1）使用React时不要从DOM读取任何内容。 DOM侦听React并相应地进行更新，在大多数情况下，不需要从它读取值。例如：

let object = document.getElementById("myDiv");
console.log(object.textContent);

相反，您可以将想要显示在myDiv中的内容存储在状态内，然后从该位置进行渲染：

this.state = { myDiv: 'some text here' }
render(){
  return(
    <div>{this.state.myDiv}</div>
  )
}

2）将handleFind(e)更改为箭头函数，或像使用handleChange(e)一样将其绑定。您还期待一个参数e，它永远不会传递，因此请使用

handleFind = () => { // code here }

或

handleFind(){ //code here }

3）对于handleFind，e.target.value并不是您期望的，即使您确实通过了事件-由于输入不是目标，因此e.target.value也是不确定的，即使如果您确实通过了这样的请求：

<AccountCircle onClick={e => this.handleFind(e)} />

这是它的稍有更改的版本，可让您在单击图标时访问输入值：

https://codesandbox.io/s/6lwx70y0rz

一些阅读材料：

Short explanation of React Virtual DOM

An article about arrow functions

An article about React state

未捕获的TypeError：无法读取未定义的属性'handleChange'

2 个答案: