时间戳

首页 > 解决方案 > 输入输出不会立即更新它会延迟

javascript - 输入输出不会立即更新它会延迟

问题描述

我创建了两个输入，并使用setState. 当我输入输入然后console.log它不会立即记录它。

例如，如果我在输入中键入“an”，它将在第二次击键时控制台记录“a”...

我知道这this.setState不会立即更新并批量更新状态，但是当我过去这样做时，它已经奏效了。为什么我的输入值没有用 React 更新？

我怎样才能让我的输入立即更新？我希望发生这种情况，因为我需要使用用户输入作为搜索关键字并将每个输入值传递给一个函数。

代码：

export default class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      movieTitleSearch: "",
      searchByYear: "",
    };
  }

  handleOnChange = (event) => {
    const { movieTitleSearch } = this.state;
    const { searchByYear } = this.state;
    this.setState({    
          ...this.state, [event.target.name]: event.target.value, 
      },
      () => {
           if (movieTitleSearch || searchByYear > 1) {
           this.props.movieSearch(movieTitleSearch, searchByYear); 
       }
          console.log(movieTitleSearch) // does not update straight away in the console.
          console.log(searchByYear) // does not update straight away in the console.
      }
    );
  };

  render() {
    return (
      <div>
        <label>search film title</label>
        <input
          onChange={this.handleOnChange}
          type="text"
          name="movieTitleSearch"
          placeholder="search by film"
          value={this.state.movieTitleSearch}
        />
        <label>search by year</label>
        <input
          onChange={this.handleOnChange}
          type="text"
          name="searchByYear"
          placeholder="search by year"
          value={this.state.searchByYear}
        />
      </div>
    );
  }
}

更新的 ONCHANGE 功能

  handleOnChange = (event) => {
    const { movieTitleSearch } = this.state;
    const { searchByYear } = this.state;
    this.setState(
      {
       ...this.state, [event.target.name]: event.target.value, 
      },
    );
    this.props.movieSearch(this.state.movieTitleSearch, this.state.searchByYear) 
      console.log(this.state.movieTitleSearch) // why when i type in the inputs does this not log to the console straight away?
      console.log(this.state.searchByYear)
  };

标签： javascriptreactjsinput

解决方案

当您使用 const 时，您正在访问以前的状态movieTitleSearch。您必须像 一样使用它this.state.movieTitleSearch，然后您将获得更新的状态值。

handleOnChange = (event) => {
    const { movieTitleSearch } = this.state;
    const { searchByYear } = this.state;
    this.setState({    
          ...this.state, [event.target.name]: event.target.value, 
      },
      () => {
           if (movieTitleSearch || searchByYear > 1) {
           this.props.movieSearch(this.state.movieTitleSearch, this.state.searchByYear); 
       }
          console.log(this.state.movieTitleSearch)
          console.log(this.state.searchByYear)
      }
    );
  };

另外，我建议调用回调的movieSearch外部setState，因为你在里面已经有了它的价值event.target.value

推荐阅读