将较低级别的组件道具发送到App

Question

我正在尝试将道具发送到顶层。

在最高级别，我正在尝试console.log事件文本

目前我不想使用Redux技术

这是下级组件

import React, { Component } from "react";

export default class Search extends Component {
  state = {
    text: ""
  };

  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
    this.props.searchUsers(this.state.text);
  };
  render() {
    return (
      <div className="ui center aligned fluid container">
        <div className="ui inverted segment">
          <div className="ui inverted input">
            <input
              type="text"
              name="text"
              placeholder="Type Something"
              value={this.state.text}
              onChange={this.onChange}
            />
          </div>
        </div>
      </div>
    );
  }
}

然后我尝试通过箭头功能searchUsers来console.log文本

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import Search from "./components/Search";


const App = () => {


  searchUsers = text => {
    console.log(text);
  };


  return (
    <div className="App">
      <Search searchUsers={this.searchUsers} />            
    </div>
  );
};

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

export default App;

我得到的错误

请帮助我确定问题所在。

Answer 1

尝试使用index.js：

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import Search from "./components/Search";

const App = () => {
  const searchUsers = text => {
    console.log(text);
  };

  return (
    <div className="App">
      <Search searchUsers={searchUsers} />
    </div>
  );
};

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

export default App;

编辑：

  

当我输入console.log时，我仅在键入下一个字母后才看到该字母...因此，如果我物理上键入Hello，则我会输入console.log地狱....解决该问题的任何方法？< / p>

这是因为您在设置状态后将状态作为参数传递。但是setState是asynchronous，因此到那时该状态尚未设置。您可以传递e.target.value或在setState中使用回调来调用this.props.searchUsers

例如：

onChange = e => {
  this.setState({ [e.target.name]: e.target.value });
  this.props.searchUsers(e.target.value);
};

这应该可以解决您的问题。

希望有帮助！

Answer 2

在App组件中，您不应使用this，而应使用const 我认为这应该有效

   const App = () => {

  const searchUsers = text => {
    console.log(text);
  };


  return (
    <div className="App">
      <Search searchUsers={searchUsers} />            
    </div>
  );
};

您不能在无状态反应组件中使用this