Question

我正在学习React，我需要帮助来了解如何为DOM中异步更新的值创建函数。例如，我在名为header的组件中有一个文本输入，如下所示：

export default class Header extends React.Component {
    constructor(props){
        super(props);
    }
    render(){
        return (
                <div className="Header">
                <div><input onKeyDown={this.props.onEnter} id="filter-results" className="full" type="text" placeholder="search kks"></input></div>
                <div><button className="full">SEARCH</button></div>
                </div>
        );
    }

}

，用于过滤搜索结果。 onEnter函数尝试使用输入中更新的值：

class App extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            categories: [],
            searchResults: [],

        };
        this.filterSearch = this.filterSearch.bind(this);
    }
    filterSearch(){
        var el = document.getElementById('filter-results').value
        console.log(el)
        var result = this.state.categories.filter(row => {
            var rx = new RegExp(el)
            return rx.test(row['id'])
        });
        console.log(result)
    }
    render(){
        return (
                <div className="App">
                <Header onEnter={this.filterSearch}/>
                </div>

        );
    }
}

当我在输入中输入内容时，该元素的值将记录到控制台。问题是，记录的总是比我期望的少一个字符。如果我键入'a'，则会得到''，'ab'=>'a'等。我可以从概念上理解，当函数被触发并记录日志时，该值尚未更新，但是我不知道。不知道如何等待值被更新然后使用它。谁能帮我吗？

Answer 1

改为使用onChange。

//change handler
handler(e) {
    console.log(e.target.value)
}
//input's onChange event
onChange={ this.handler.bind(this) }

Answer 2

1）您不应该使用本机JavaScript通过ID来获取价值。这不是反应方式。

App.js

import React from "react";
import ReactDOM from "react-dom";
import Header from "./Header";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      categories: [],
      searchResults: []
    };
    this.filterSearch = this.filterSearch.bind(this);
  }
  filterSearch(value) {
    console.log(value);
    var result = this.state.categories.filter(row => {
      var rx = new RegExp(value);
      return rx.test(row["id"]);
    });
    console.log(result);
  }
  render() {
    return (
      <div className="App">
        <Header onEnter={this.filterSearch} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

// Header.js

import React from "react";

export default class Header extends React.Component {
  constructor(props) {
    super(props);
  }

  handleChange = ({ target }) => {
    this.setState({
      [target.name]: target.value
    });
    this.props.onEnter(target.value);
  };
  render() {
    return (
      <div className="Header">
        <div>
          <input
            onChange={this.handleChange}
            name="filter-results"
            className="full"
            type="text"
            placeholder="search kks"
          />
        </div>
        <div>
          <button className="full">SEARCH</button>
        </div>
      </div>
    );
  }
}

在react函数中更新后从文本输入获取值

2 个答案: